create-react-app的兩種跨域解決方式

我們可以在node-modules/react-scripts/webpack-dev-server.js文件直接配置proxy選項
但是后續如果繼續安裝其他模塊的話 yarn 內部會檢測 有沒有文件被改動 若有改動恢復原樣

兩種解決方式

  1. 彈射配置文件
    使用 yarn eject 命令 將react-scripts中一些重要的配置文件彈射出來
    然后對文件config/webpackDevServer.js文件的poxy選項進行配置 更改
    注意:如果彈射失敗 (可以將文件夾下面的.git文件夾刪除 再進行彈射)
   proxy:{
        "/api":{
            target:"http://47.96.0.211:9000",
            changeOrigin:true,
            pathRewrite:{
            "^/api":""
            }
        }
    },

http-proxy-middleware解決跨域
安裝 http-poxy-middleware
命令:yarn add http-poxy-middleware -S
在src/根目錄下新建 setupProxy.js文件 進行如下配置:

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

原文鏈接:https://blog.csdn.net/weixin_44862325/article/details/105595720

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。