三、React中处理跨域的两种方法

方法一

1. 安装axios

npm install axios

2. client端口为3000，server端口为5000
3. client向server发送请求：

axios.get('http://localhost:5000/xxxxxx').then(
	response => {console.log('成功了',response.data);},
	error => {console.log('失败了',error);}
)

• 注意：由于client和server的端口不一样，此时存在一个跨域的问题
• 解决方法：配置代理（http://localhost:5000）
• 当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
• 修改client中的代码

axios.get('http://localhost:3000/xxxxxx').then(
	response => {console.log('成功了',response.data);},
	error => {console.log('失败了',error);}
)
//client端，端口5000g改为3000

• 修改package.json：在该文件中配置代理

 "proxy": "http://localhost:5000"

方法二

1. 方法一中存在的问题：无法应对当存在两个服务器时的情况
2. 解决方法：在src目录下创建setupProxy.js文件
3. 客户端：

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

getCarData = ()=>{
	axios.get('http://localhost:3000/api2/cars').then(
			response => {console.log('成功了',response.data);},
			error => {console.log('失败了',error);}
		)
	}

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的值
			pathRewrite:{'^/api1':''} //重写请求路径(必须)
		}),
		proxy('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}