在react项目中怎么解决跨域问题？解决跨域问题的方法！

2021-06-18 17:49:17 浏览数 (1)

在我们的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


React.JS

0 人点赞