使用webpack proxy配置开发环境代理,解决跨域问题。(Vue cli 3也适用)

解决方案我写了一个例子,觉得有用的话,点个star。

地址:https://github.com/janyxh/vue-study/blob/master/vue.config.js

-------------------------- 分割线 -----------------------

最近调试接口,使用本地ip对接接口调试,在同事的机子上调试。
在Swagger和Postman上调试都没有问题,一放进项目里,报错了。
使用webpack proxy配置开发环境代理,解决跨域问题。(Vue cli 3也适用)_第1张图片
众所周知,跨域是源于同源策略(同协议,同主机,同端口)的限制,解决跨域的方式很多种,本文只讲解一下如何使用webpack配置开发环境的跨域。



第一,配置webpack代理

打开 webpack 配置文件,进入开发环境下配置。在module.exportsdev对象下。
如果是 vue cli 3 ,刚进入vue.config.js。如果没有vue.config.js文件,在项目的根目录下,创建一个。在module.exportsdev对象下配置,也可以在configureWebpack: config=>{ ... } 函数内判断开发环境,然后config.devServer = { 配置信息 }

配置信息如下:

devServer: {
    proxy: {
      "/api": {
        target: "http://172.16.1.18:8769", 
        changeOrigin: true,
        pathRewrite: {
          "^/api": ""
        }
      }
    }
  }

参数解读:
"/api": 指接口调用时,遇到接口路径为 api 时,则代理转发到 target 的配置url上
target: 开发环境调用的接口地址
changeOrigin:改变源到url,在虚拟主机上很有用
pathRewrite:是指服务器把接口中api去掉,以免api这几个字母加入到接口地址中



第二,修改调用接口的域名

修改接口地址开头的调用地址,例如:

let base = ''; // 测试'

if (process.env.NODE_ENV === "development") {
  base = "/api/move-server"; // 开发
} else if ( process.env.NODE_ENV === "production") {
  base = ''; // 线上
}

重启一下服务,可以看到,此时已经可以正常访问了。状态码为200,图片已经读取到。
使用webpack proxy配置开发环境代理,解决跨域问题。(Vue cli 3也适用)_第2张图片

你可能感兴趣的:(webpack)