create-react-app 构建的项目中配置proxy

前言： 目前项目开发中大都采用的是完全前后端分离开发模式，各自独立进行开发，虽然最后前后端都会部署到同一台服务器上，但在开发过程中前后需要进行联调，这个过程难免会遇到跨域问题。

解决跨域问题：

1. 使用 react 脚手架 create-react-app 搭建react基础项目。
2. 运行 npm run eject 展开项目中的详细配置

注意：项目中只能执行一次，展开后不可恢复；
如果项目需要相关配置文件，建议刚开始执行。
但在展开的webpack配置中，并没有找到 proxy 相关配置。

3. create-react-app 版本低于 2.0 时，可以直接在 package.json 中增加 proxy 配置项，如下：

"proxy": {
	"/api/**": {
		"target": "http://blog.csdn.net/zlq_csdn",  // 目标服务器
		"changeOrigin": true,  // 默认false，是否改变原始主机头为目标URL
		"pathRewrite": {
			"^/api": "/",   // 将 '/api' 重写为 '/'
			"secure": false,  // 如果为https的接口，需要配置该参数为true
		}
	}
},

4. create-react-app 版本高于 2.0 时，在 package.json 中只能配置为 string 类型了，如下：

"proxy": "http://blog.csdn.net/zlq_csdn",

5. 推荐方案：在 src 目录下新建 setupProxy.js 文件，并依赖 http-proxy-middleware 中间件来配置代理服务（可配置多项），如下：

// 配置代理中间件，以进行连接、表达、浏览器同步等。
const { createProxyMiddleware } = require("http-proxy-middleware");

// 配置代理服务
const apiProxy = createProxyMiddleware("/api", {
	target: "http://localhost:3001",
	secure: false,
	changeOrigin: true,
	pathRewrite: {
		"^/api": "/api"
	}
});

const apiProxy2 = createProxyMiddleware("/api2", {
	target: "http://localhost:3002",
	secure: false,
	changeOrigin: true,
	pathRewrite: {
		"^/api2": "/api2"
	}
});

module.exports = function(app) {
	app.use(apiProxy);
	app.use(apiProxy2);
}