kuayu react_React开发环境跨域问题解决

前言

create-react-app搭建的项目中，请求需要处理跨域问题

解决方案

找到webpackDevServer.config.js

image.png

寻找proxy

image.png

3.普通代理修改为

proxy: {

'/postApi': {

target: 'http://' + 192.168.0.2:8080,

changeOrigin: true,

secure: false,

},

'/xxx': {

target: 'http://' + IP地址:端口, //访问目标

changeOrigin: true, //是否为域名

pathRewrite: { //重写地址

"^/xxxi": "/"

},

ws: true, //是否是长连接

secure: false, //是否https

},

}

4.比如，http://192.168.0.2:8080是服务器，需要请求postApi这个接口，而192.168.0.1是本地IP地址。因为要使用webpack的代理，所以本地所有请求都换成 http://192.168.0.1:3000(自己的端口)，而这个时候webpack服务会代理转发到http://192.168.0.2:8080/postApi中完成跨域问题。

5.pathRewrite用法,http://192.168.0.2:8080/postApi是请求接口,pathRewrite写 /postApi : /xxx 访问的地址是http://192.168.0.2:8080/xxxx，适合多方请求，接口名称有重命名的问题

6.websockt代理，ws改为true 跟普通代理一致

结尾

当前用的是新webpack，旧项目需要注意