webpack代理解决跨域问题

前端开发中会出现一些跨域问题，常见的是webpack配置代理Access to XMLHttpRequest at ‘http://192.168.201.191:8081/store/get’ from origin ‘http://localhost:9527’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’

yotomato

6052人浏览 · 2022-04-01 10:16:38

yotomato · 2022-04-01 10:16:38 发布

前端开发中会出现一些跨域问题，如下图所示
跨域问题报错
Access to XMLHttpRequest at ‘http://192.168.201.191:8081/store/get’ from origin ‘http://localhost:9527’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

一般情况我们可以通过修改请求中的headers去解决，但是在开发环境中服务端的headers是固定的，前端传过去后端没有采用。或者直接找后端同学修改Access-Control-Allow-Origin为*，这种直接放开所有域名不太好。

config.headers["Access-Control-Allow-Origin"]="http://192.168.201.191:8081"
// 或者config.headers["Access-Control-Allow-Origin"]="*"

所以我们可以通过前端配置webpack代理去解决跨域问题

在webpack配置文件的devServer里面配置如下信息

proxy: {
  '/api': {
    target: 'http://192.168.201.191:8081',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
},

在这里插入图片描述
2. 配置中的主要参数说明

2.1 “/api”
捕获API的标志，如果API中有这个字符串，那么就开始匹配代理，比如API请求/api/store/get, 会被代理到请求 http://www.baidu.com/api/store/get 。

2.2 target
代理的API地址，就是需要跨域的API地址。
地址可以是域名,如：http://www.baidu.com
也可以是IP地址：http://127.0.0.1:3000
如果是域名需要额外添加一个参数changeOrigin: true，否则会代理失败。

2.3 pathRewrite
路径重写，也就是说会修改最终请求的API路径。
比如访问的API路径：/api/store/get,设置pathRewrite: {'^/api' : ''},后，最终代理访问的路径：http://www.baidu.com/store/get，这个参数的目的是给代理命名后，在访问时把命名删除掉。

2.4 changeOrigin
这个参数可以让target参数是域名。

2.5 secure
secure: false,不检查安全问题。
设置后，可以接受运行在 HTTPS 上，可以使用无效证书的后端服务器