react项目的跨域处理

1. 下载依赖包

npm i http-proxy-middleware --save

2. 在src根目录下新建setupProxy.js 文件（注意setupProxy文件名不要拼错，否则不生效！！！）

setupProxy.js

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(
        createProxyMiddleware('/api', {   // 匹配所有带'/api'的接口地址进行代理转发
            target: 'http://xxx',  // 代理地址
            changeOrigin: true,
            pathRewrite: {
                '^/api': ''  // 将请求地址中的'/api'重写为空再请求接口（也就是去掉/api）
            }
        })
    )
}

ps：这是1.x+版本写法，低版本不能这样写！

匹配地址写法区别：

'/api/*'  // 只匹配/api后面一级路由地址（/api/xxx），如果是/api/xxx/xxx/...则匹配不到。

'/api'    // 匹配带有/api的所有路由地址，一级多级都能匹配到。

3. 我们在项目中的要转发的接口都加上'/api'，这样代理配置就可以匹配到我们的接口了，这样我们就完成了项目接口的跨域处理！