ReactAjax关于跨域问题的解决

Posted 2021-08-11 ~往无前

react应用中需要集成第三方ajax库(或者自己封装)，这里使用axios

解决跨域问题：

使用代理的方式来解决这个问题，设置代理的方式，在脚手架的package.json文件中的进行配置;

"proxy":"https://localhost:5000" //这时候当在3000端口发送请求的时候，会将请求发送给5000端口，从而实现跨域的问题解决

当有多个服务器的时候，需要向多个服务器发送请求，每次请求都会有跨域问题。如何写代理，使得访问到正确的端口号。所以如果想配置多个代理：在src文件夹下面创建一个文件：setupProxy.js

const proxy=require("http-proxy-midlleware")
module.export=function(app){
   app.use(
       //如果在请求中出现了api1则使用下面的代理
   porxy("/api1",{
       target:"http://localhost:5000",
       changeOrigin:true,//控制服务器收到请求头中Host字段的值
       pathRewrite:{'^/api1':''} //重写请求路径，将请求路径中的api1关键词转变为空,必须要做的事
   }),
      //配置第二个代理地址
       proxy("/api2",{
           target:'http://localhost:5001',
           changeOrigin:true,
           pathRewrite:{'^/api2':''}
       })
   )
}

发起请求：

//当发起以下的请求时，首先会在当前的public文件夹下寻找students文件，如果没有则通过关键字api1，在其所对应的代理地址中寻找students文件
//想要请求端口5000的服务器
axios.get("http://localhost:3000/api1/students").then(
	response=>{console.log("成功了")}
)
//想要请求端口为5001的服务器
axios.get("http://localhost:3000/api2/cars").then(
	response=>{conosole.log("成功了")}
)

正常情况下，能够使用axios访问跨域网站的原因是服务器通过cros技术解决了跨域问题，所以在前端嗲用借口的时候就，很多时候不会出现跨域问题。即后端会返回一个响应头，这个响应头就可以让所有的访问成功进行。

但是在上线的项目中，服务器很少通过cros方法解决跨域，因为这样就代表着所有的网站都可以访问你的服务器，所以在真实的开发中，很多时候使用的是在前端通过代理的方式来解决这个问题。

如果当前网站的地址是你发送请求的地址，在axios的访问地址中就可以忽略掉前缀地址:http://localhost:3000