React的跨域解决问题

React的跨域解决问题

第一种方法
在package.json中的

本来的端口号在自己本身没有的路径请求全部都发送给了你代理的端口号,比如说你请求index.html 首页你自己是有的所以返回的是是自己的,当你请求index2.html 自己没有,所以还是发送给代理

第二种方法

不在package.json里面配置,在src 下面新建一个文件setupProxy.js 文件名不能改,因为React会自动查找配置

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':''}
		}),
	)
}