在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项目中怎么解决跨域问题？”这个问题小编收集的内容，当然如果你有更好的方法可提出来和大家探讨学习，更多有关于react这方面的内容我们都可以在React 教程中进行学习和了解。

参考资料：

JSONP与CORS相关内容文章链接：https://blog.csdn.net/qq_38128179/article/details/84956552

Mac安装nginx注意事项和流程链接：https://www.cnblogs.com/yy136/p/12690225.html