create-react-app項(xiàng)目所遇問題總結(jié)之跨域

以下為學(xué)習(xí)react技術(shù)棧開發(fā)過程中,遇到的問題以及解決方法總結(jié)。各位看官請(qǐng)往下瞧!☆?(ゝ。?)

如何進(jìn)行跨域?

方式一

第一步,執(zhí)行命令
yarn eject

先將react-scripts的配置釋放出來。

第二步,配置config/webpackDevServer.config.js

在config/webpackDevServer.config.js中全局搜索proxy,找到


webpackDevServer.config.js

配置成需要代理的接口配置:


在這里插入圖片描述

(關(guān)于proxy的一些參數(shù)的含義和配置的規(guī)則,不知道的小伙伴可以到網(wǎng)上查閱一下,這里不做說明。)

配置完成后重啟,即可生效。

方式二

第二種方式,不需要執(zhí)行yarn eject,將react-scripts的配置彈射。
需要安裝 http-poxy-middleware依賴。
先執(zhí)行

yarn add http-poxy-middleware -S

執(zhí)行完成后,再到src目錄下新建文件setupProxy.js
配置為

const {createProxyMiddleware} = require("http-proxy-middleware");
    module.exports = function(app){
        app.use(
            createProxyMiddleware("/api",{
                target:"你的接口前綴",
                changeOrigin:true,
                pathRewrite:{
                "^/api":""
                }
            })
        )
    }

重啟,查看是否生效。

第一種方式是我現(xiàn)在用的,驗(yàn)證過已生效。第二種方式,我沒驗(yàn)證過是否生效,但是網(wǎng)上有很多篇文章有說明,故我也寫上,待之后親自驗(yàn)證。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容