在react ts中实现跨域请求

使用中间件http-proxy-middleware 在src文件夹下创建setupProxy.js文件进行相关的配置 文件名不能更改 进行配置

const proxy = require('http-proxy-middleware') //引入这个库这个库React里面有所以不用下,直接饮用

module.exports = function(app){
	app.use(
		//上下两个代理对比
		proxy('/api1',{ //遇见/api1前缀的请求，就会触发该代理配置 
			//axios的url应该是"http://localhost:3000/api1/某某地址  通过3000端口转向5000 
			//同理输入http://localhost:3000/api1/某某地址 通过3000转向5001
			target:'http://localhost:5000', //请求转发给谁
			changeOrigin:true,
			//控制服务器收到的请求头中Host的值,默认是false,输出的Host请求头是localhost:3000,true的话就是localhost:5000
			pathRewrite:{'^/api1':''} //重写请求路径(必须)
			//如果不写就变成 http://localhost:5000/api1/某某地址 ,因此把api1换成空
		}),
		proxy('/api2',{
			target:'http://localhost:5001',
			changeOrigin:true,
			pathRewrite:{'^/api2':''}
		}),
	)
}

axios请求配置 请求以/api开头则可以触发setupProxy中的配置