一、業(yè)務(wù)場景：
前后端數(shù)據(jù)交互時會存在跨域的情況，這個時候就比較難受。傳統(tǒng)的解決方案有三種，分別是
Jsonp：但是只能處理get請求
后端CSRF：配置注解@CrossOrigin（用的最多）
反向代理 ：純前端處理跨域，其原理是利用后端沒有跨域限制，咱們呢只負(fù)責(zé)請求自己的服務(wù)器，讓自己的服務(wù)器請求要訪問的服務(wù)器地址
二、解決方案：
新建處理跨域的文件（setupProxy.js），放入配置代碼

const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {app.use('/api',createProxyMiddleware({target: 'https://i.maoyan.com', //要訪問的地址changeOrigin: true,}));// 可以代理多個// app.use(// '/api',// createProxyMiddleware({// target: 'https://i.maoyan.com',// changeOrigin: true,// })// ); };

配置完畢后需做以下操作

（1）安裝 http-proxy-middleware模塊

npm i http-proxy-middleware --save

（2）發(fā)送請求

axios.get('/api/mmdb/movie/v3/list/hot.json?ct=%E6%9D%AD%E5%B7%9E&ci=50&channelId=4').then((res) => {console.log(res).catch((err) => {console.log(err)})

（2）重啟服務(wù) 重啟服務(wù) 重啟服務(wù)重要的事情說三遍

三、效果展示

今天的分享到此結(jié)束，歡迎小伙伴們一起交流

總結(jié)

以上是生活随笔為你收集整理的React跨域解决方案的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。