react项目中设置axios跨域问题

在react中设置跨域还是非常简单的，如果是单个api接口的话，直接在 package.json 中设置proxy字段，如下：

"proxy": "http://localhost:8000"

是不是超级简单

有些同学可能会遇到下面这个报错

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.

那是因为package.json文件里是不能把proxy字段写成下面这种形式的。

"proxy": {
    "/api/": {
      "target": "http://localhost:8000"
    }
}

同理，当你需要多个不同的api接口呢？你直接在package.json文件里配置proxy成对象？如下

"proxy":{
    "/api/v1": {
      "target": "https://www.fakin.cn",
      "changeOrigin":true
    },
    "/api/v2":{
      "target":"https://www.fakin.cn",
      "changeOrigin":true
    }
}

当你npm start启动的时候，你就会发现类似于下面的报错

When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! r-d-m@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1

这个报错的意思是proxy只能是字符串不能是对象（真是叫人头大啊，以前这么配置就行，为什么现在不行）

报错的原因是：

在create-react-app2.0中限制了，不能在和以前一样简单的配置proxy跨域了，现在如果你需要多个api接口跨域的话，那么就得另外配置！

大部分react应用可以用create-react-app构建，开箱即用，如果自定义配置可以npm run eject,目前create-react-app2.0不能在和以前一样配置proxy跨域了（单个可以，多个不行）

解决办法：

1、安装http-proxy-middleware

npm install http-proxy-middleware

2、在src目录下创建setupProxy.js,加入以下代码

const proxy = require('http-proxy-middleware');
module.exports = function (app) {
    app.use(proxy('/baidu', {
        target: "https://news.baidu.com/",
        pathRewrite: {'^/baidu': ''},
        changeOrigin: true
    }));
    app.use(proxy('/api', {
        target: "https://www.fakin.cn/",
        pathRewrite: {'^/api': ''},
        changeOrigin: true
    }));
};

此处需要注意的是 setupProxy.js  文件是在src目录，而不是在根目录