react项目中如何解决跨域问题

这篇文章主要介绍“react项目中如何解决跨域问题”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react项目中如何解决跨域问题”文章能帮助大家解决问题。

一.为什么会出现跨域？

因为我们的浏览器遵循同源政策（scheme（协议）、host（主机）、和port（端口））都是被称为同源。有同源就有非同源，那么在非同源中有下面这些限制：不读取和修改对方的DOM、不读取和访问对方的Cookie ，IndexDB 和 LocalStorage、限制XMLHttpRequest请求。而且当浏览器向目标路径发送Ajax请求的时候，只要我们当前的路径和目标路径不同源，则会产生跨域，也被称为跨域请求。

二.解决方法

1.JSONP

jsonp是指服务器与客户端跨源通信常用的方法，拥有简单适用、兼容性好的特点，但是它有一个缺点就是只支持get请求不支持post请求。然而在HTML的标签中有一些标签是没有跨域限制的，比如 script 和img这两个就是了。对于这个的方法的用法就是通过在网页中添加一个<script>,然后在向服务器请求json数据，等服务器收到请求之后，就会将这个数据放在一个指定名字通过回调函数的参数位置传回来。

2.CORS

在这个方法中拥有普通跨域请求和带cookie跨域请求。在普通跨域请求中：我们只需要在服务端设置Access-Control-Allow-Origin

，然而在带cookie跨域请求中：前后端都需要进行设置(前端设置：根据xhr.withCredentials字段判断是否带有cookie)。

3.proxy

我们可以通过这个方法在package.json文件中使用proxy配置就可以解决跨域问题，代码如下：

"proxy":{
    "/api":{
       "target":"http://xxx.xxx.com",
       "changeOrigin": true,
       "pathRewrite": {
        "^/api": ""
    }
     }
 }

代码中的target是指接口的域名；changeorigin是指开启代理；对于pathRewrite的话是指：可以看到我使用了/api来匹配请求接口的域名，而接口名称是/admin/login，因此在实际请求中应该写成/api/admin/login，但是我实际请求的地址又是没有api前缀的，因此需要通过pathRewrite重写地址，将接口请求的时候前缀去除。

4.Nginx

在上面的方法中可以解决我们很多在开发中的跨域问题，但是却无法解决生产环境上的跨域问题。这个方法的功能有这么几种：http服务器（可以独立提供http服务）、虚拟主机（可以多个域名指向同一个服务器，而且服务器根据不同的域名把请求转发到不同的应用服务器）、方向代理(负载均衡，将请求转发至不同的服务器).

关于“react项目中如何解决跨域问题”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。