React 脚手架配置代理，实现跨域请求

方法一：只需请求一个服务器

在 package.json 文件中添加一行代码："proxy": "服务器地址（到端口号就行）"

// 例如
"proxy": "http://localhost:5000"

假设你处于3000的端口，服务器处于5000端口，此时你 axios 请求的应该是 3000 端口，才会发送成功

axios.get('http://localhost:3000/students').then(
	res => { console.log('成功了', res.data)}
	error => { console.log('失败了', error)}
)

但是如果你3000 端口下有 stu 文件(即 public 文件夹下面)，则不会请求 5000下面的stu，而是直接请求3000下的 stu

说明：

1. 优点：配置简单，前端请求资源时可以不加任何前缀
2. 缺点：不能配置多个代理
3. 工作方式：当请求了3000不存在的资源时，那么该请求会转发给5000（优先匹配前端资源）

方法二：需请求多个服务器

1. 在 src 文件夹下新建 setupProxy.js 文件

2. 编写 setupProxy.js 配置具体代理规则

   const proxy = require('http-proxy-middleware')
   
   module.exports = function(app) {
   	app.use(
   		proxy('/api1', {	// api1是需要转发的请求（所有带有/api1前缀的请求都会转发给5000）
   			target: 'http://localhost:5000',	// 配置转发目标地址（返回数据的服务器地址）
   			changeOrigin: true,	// 控制服务器接收到的请求头中 host字段值
   			/* 
   				默认值为 false,但一般设置为 true
   				为false时，服务器收到的请求头中的host为 localhost:3000（即：前端资源地址）
   				为true时，服务器收到的请求头中的host为 localhost:5000（即：服务器端地址）
   			*/
   			pathRewrite: {'^/api1': ''}	// 重写请求路径，去除请求前缀，保证交给后台服务器的是正常请求地址（必须配置）
   		}),
   		proxy('/api2', {
   			target: 'http://localhost:5001',
   			changeOrigin: true,
   			pathRewrite: {'^/api2': ''}
   		})
   	)
   }
   

3. axios请求则变为

   axios.get('http://localhost:3000/api1/students').then(
   	res => { console.log('成功了', res.data)}
   	error => { console.log('失败了', error)}
   )
   
   axios.get('http://localhost:3000/api12/teacher').then(
   	res => { console.log('成功了', res.data)}
   	error => { console.log('失败了', error)}
   )
   

说明：

1. 优点：可以配置多个代理，可以灵活控制请求是否走代理
2. 缺点：配置繁琐，前端请求资源时必须加前缀