vue-cli 3 + axios 配置proxy代理,解决本地跨域

需求描述:
开发环境web服务端口为8080,接口服务端口为80,需要在开发环境也能跨域正常访问80端口的服务。
在入口文件main.js增加以下代码:

let ROOT;
if (process.env.NODE_ENV === 'development') {
    ROOT = "/apis";//开发环境下的代理地址,解决本地跨域
} else {
    ROOT = 'http://192.168.8.126';    //生产环境下的地址
}
axios.defaults.baseURL = ROOT;

在项目根目录创建vue.config.js 文件内如如下:

module.exports = {
    devServer: {
        host: "192.168.8.126", //要设置当前访问的ip 否则失效
        port: 8080,//当前web服务端口
        open: false, //浏览器自动打开页面
        proxy: {
          '/apis': {
            target: 'http://192.168.8.126',//目标地址
            ws: true,//是否代理websocket
            changeOrigin: true,//是否跨域
            pathRewrite: {
              '^/apis': ''//url重写
            }
          }
        }
    }
}

跨域请求示例:
vue-cli 3 + axios 配置proxy代理,解决本地跨域_第1张图片

你可能感兴趣的:(技术文章)