vue中proxy的使用---解决本地开发过程中与后端服务器的跨域问题

3,348 阅读1分钟

请求的路径必须是不带域名的。类似于axios.get('/api'),不能axios.get('http://xx.com/api')

只需配置vue.config.js即可

// 你axios请求的是 /apis/getName  (默认会直接 将当前访问的网址的origin加在路径前面 如项目的访问地址是http://10.73.33.84:8080/#/  那么接口就是 http://10.73.33.84:8080/apis/getName)
// 但实际上希望能请求 http://test.staff.cn/test/apis/getName
module.exports = {
  devServer: {
    proxy: {
        '/apis': {
            // target实际想请求的域名
            target: 'http://test.staff.cn',
            // 如果就是 http://test.staff.cn/apis 则不需要这行,这个是改变路径的
            pathRewrite: { '^/apis': '/test/apis' },
            // 如果websocket服务也开启代理,需要下面的
            ws: true,
            // 如果后端服务托管在虚拟主机的时候,也就是一个IP对应多个域名,需要通过域名区分服务,就要下面的
            changeOrigin: true,
            // 如果后端服务器使用无效的https证书,需要加上下面的
            secure: false
        },
    }
   
}

!!!!每次配置完,记得重新npm run serve

参考文档