以下為學(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)證。