React跨域解决方案

一、业务场景：
前后端数据交互时会存在跨域的情况，这个时候就比较难受。传统的解决方案有三种，分别是
Jsonp：但是只能处理get请求
后端CORS：配置注解@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）重启服务 重启服务 重启服务重要的事情说三遍

三、效果展示

今天的分享到此结束，欢迎小伙伴们一起交流