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

最新推荐文章于 2024-05-08 17:53:40 发布

前端攻城狮一枚

最新推荐文章于 2024-05-08 17:53:40 发布

阅读量2.2k

点赞数

分类专栏：技术文章

本文链接：https://blog.csdn.net/qq_38636430/article/details/101373656

版权

技术文章专栏收录该内容

6 篇文章 0 订阅

订阅专栏

需求描述：
开发环境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重写
            }
          }
        }
    }
}

跨域请求示例：