解決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":"" } 
        })
    )
}