【一起来学React】- React跨域设置

好久没写博客了，快一个月了，最近一直在研究react，所以接下来一段时间估计基本都是react相关文章了，原文地址：https://www.fakin.cn/2450.html

前言（可跳过）

乍一看，这标题，跨域嘛，多简单，我直接在package.json,配置proxy不就可以了吗？如下

"proxy":"https:www.fakin.cn"

然后一发axios，美滋滋！
当你需要多个不同的api接口呢？直接配置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接口跨域的话，那么就得另外配置！（终于到正文了）

node环境

let proxy = require('http-proxy-middleware')
const options = {
    target: 'http://www.fakin.cn',
    changeOrigin: true
}
const options = {
    target: 'http://www.baidu.com',
    changeOrigin: true
}
app.use('/api', proxy(options))
app.use('/fakin', proxy(options2))

最重要的是安装http-proxy-middleware模块!

webpack

webpack的话和node下差不多,在webpack.config.js

var proxy = require('http-proxy-middleware')
    module.exports = {
        devServer: {
           host: 'localhost',
           port: '3000',
           proxy: [
               {
                    context: '/api',
                    target: 'https://www.fakin.cn',
                    changeOrigin: true,
              },{
                    context: '/fakin',
                    target: 'https://www.fakin.cn',
                    changeOrigin: true,
              }
           ]
        }
    }

最重要的是还是安装http-proxy-middleware模块!

create-react-app

大部分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
    }));
};

ps:当然还有一些，你可以通过各种反向代理软件实现，这里就不多介绍了！