一、業務場景：
前后端數據交互時會存在跨域的情況，這個時候就比較難受。傳統的解決方案有三種，分別是
Jsonp：但是只能處理get請求
后端CSRF：配置注解@CrossOrigin（用的最多）
反向代理 ：純前端處理跨域，其原理是利用后端沒有跨域限制，咱們呢只負責請求自己的服務器，讓自己的服務器請求要訪問的服務器地址
二、解決方案：
新建處理跨域的文件（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）發送請求

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）重啟服務 重啟服務 重啟服務重要的事情說三遍

三、效果展示

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。