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

请求的路径必须是不带域名的。相似于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

参考文档

• vuecli官网的说明
• webpack开发配置API代理解决跨域问题-devServer
• Webpack-dev-server的proxy用法
• http-proxy-middleware 的github