php 设置跨域axios,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目录，而不是在根目录