解决react跨域的两种代理配置

react两种代理配置

在项目文件夹中按以下路径找到devServer.js文件。进行代理配置

node_modules>react-scripts>config>devServer.js

    proxy:{
        "/api":{
            target:"http://47.96.0.221:9000",
            changeOrigin:true,
            pathRewrite:{
            "^/api":""
            }
        }
    }

但是这种方法后续安装新的模块的时候，内部yarn.lock文件实时的检测node_modules下面的文件是否手动的 更改过，如果更改的话，重新变成初始状态。

解决方案一：

可以通过 yarn eject 进行react-scripts相关配置文件的抽离操作。
找到文件夹中的git文件删除（找不到的话可能隐藏了，在文件夹设置中选择显示）

git初始化提交

      git init
      git add .
      git commit -m "first commit"
      git push origin master

再去控制台输入命令 yarn eject Y ，抽离出来后，出现了如下所示的文件夹：在下图中标红的部分进行代理配置

第二种方案：

在项目文件中输入以下指令

yarn add http-proxy-middleware

在src下创建个setupProxy.js文件（名字只能是这个）

在文件夹进行如下配置

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app){
    app.use(
        "/api",
        createProxyMiddleware({
             target: 'http://47.96.0.221:9000', 
             changeOrigin: true , 
             pathRewrite:{ "^/api":"" } 
        })
    )
}