vue项目如何配置proxyTable解决跨域问题

最新推荐文章于 2025-10-14 15:55:16 发布

原创最新推荐文章于 2025-10-14 15:55:16 发布 · 1.5k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #跨域问题 #ProxyTable

Vue 专栏收录该内容

128 篇文章

订阅专栏

本文介绍了解决项目开发中常见跨域问题的方法。通过在config/index.js文件中配置proxyTable，可以实现对'/api'开头的请求路径进行代理，目标为'http://localhost:4000'，并支持跨域及路径重写。

在项目的开发之中，做数据请求的时候，会经常遇到跨域的问题。我们可以在config目录下的index.js文件中，配置proxyTable去解决。
/api 是匹配所有以'/api' 开头的请求路径，target是代理目标的基础路径，changeOrigin是支持跨域，pathRewrite是重写路径，去掉路径中开头的'/api'，代码如下所示：

const path = require('path')

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
    ......
}