react跨域 完美篇

react的跨域、跨域的注意事项

====================================================================

首先查看react项目的版本，>2时使用以下完成跨域
其实现在你创建一个项目，几乎都是>2的版本了，不信你查查看

1、查看版本

create-react-app -V

2、我们先来看看后端的跨域（要注释掉，不然你做啥react跨域）

app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'X-Requested-With,X_Requested_With,Content-Type,auth');
    next();
 })

3、正文开始了

当只有一个代理时，在package.json里面加一句：“proxy”:“http://localhost:8888/” 搞定

但是很多时候不仅只有一个代理，那么我们该怎么做呢？

第一步：
安装：npm install http-proxy-middleware

第二步：
在src文件下新建 setupProxy.js文件，复制以下代码搞定（这个文件会被自动识别，不用去导入）

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:8888/',
            changeOrigin: true,
            pathRewrite: {
                '^/api': '',
            }
        })
    );
    app.use(
        '/apc',
        createProxyMiddleware({
            target: 'http://localhost:7777/',
            changeOrigin: true,
            pathRewrite: {
                '^/apc': '',
            }
        })
    );
};

注意：

1、如果你在setupProxy.js中使用的是proxy，但是却不生效？把proxy换成createProxyMiddleware就行了
2、 如果你不写pathRewrite: {’^/api’: ‘’}，跨域能成功，但你拿不到想要的数据

====================================================================

跨域成功后，如何操作获取数据呢？
请看文章：https://blog.csdn.net/csdnyp/article/details/115937808