Web跨域问题和常用解决方式cors和jsonp以及反向代理

淡淡的烟草味﹌ 2023-10-07 18:27 14阅读 0赞

#### 文章目录 ####

*  浏览器的同源策略
 *  jsonp解决跨域的思想
 *  CORS解决跨域的思想
 *  反向代理解决跨域问题

## 浏览器的同源策略 ##

不同协议、不同端口、不同域名。满足其中一个都会被浏览器的同源策略阻止，html5以后同源策略被放宽。

## jsonp解决跨域的思想 ##

script标签引用别的源不会出现问题，这是因为当时在设计这个script标签的时候，就允许别的源请求脚本，所以就产生了jsonp。但是ajax，fetch请求都会出现跨域问题。  
简单地说：jsonp利用了script的漏洞去请求数据，所以jsonp只能发get请求。

## CORS解决跨域的思想 ##

根本原因：  
基于 Ajax 请求跨域获取数据失败的真正原理是：浏览器禁止与当前网页不同来源的数据被使用。

解决方式：  
CORS的核心简单来说就是设置头部Access-Control-Allow-Origin。当存在这个头部时，浏览器就会选择放行（本身跨域问题根源就是浏览器的同源策略，浏览器都选择放行了，这个问题自然而然也就解决了）。

CORS存在两种请求：简单跨域请求和复杂跨域请求  
简单跨域请求：请求只会发送一次  
复杂跨域请求：请求会发送两次，第一次是预检请求，第二次才是普通请求  
预检请求：主要目的是从而获知服务端是否允许该跨域请求，次要目的是同时在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。  
设计的目的：减轻服务器的压力

## 反向代理解决跨域问题 ##

如何使用反向代理解决跨域问题：在代理服务器上配置CORS解决跨域问题，服务器把数据传给代理，代理再将数据处理加上Access-Control-Allow-Origin字段传给浏览器解决跨域问题。实际上认真想想，正向代理也是可以解决跨域问题，原理都是一样的。  
注意：浏览器、服务器、代理，这3个相互不同源。

首先不懂正向代理和反向代理的，可以看参考文档。  
简单解释一下：如何区别正向代理和反向代理，看代理专门为谁服务，如果代理是为客户端服务那就是正向代理，如果代理是为服务端服务那就是反向代理

参考文档：

*  [基于 CORS 实现跨域请求的原理][CORS]
 *  [CORS跨域时，为何会出现一次动作，两次请求？][CORS 1]
 *  [cors跨域请求，重复提交问题][cors]
 *  [配置nginx实现反向代理解决跨域问题][nginx]
 *  [正向代理与反向代理区别图解 ][Link 1]
 *  [一篇文章让你搞懂如何通过Nginx来解决跨域问题][Nginx]
 *  [通过nginx反向代理解决跨域][nginx 1]

[CORS]: https://blog.csdn.net/Marker__/article/details/103395798
[CORS 1]: https://blog.csdn.net/weixin_34097242/article/details/87963676
[cors]: https://blog.csdn.net/shooke/article/details/72593605
[nginx]: https://blog.csdn.net/HermitSun/article/details/99696277
[Link 1]: https://www.cnblogs.com/xudong-bupt/p/8661523.html
[Nginx]: https://blog.csdn.net/qq_38526573/article/details/106847344
[nginx 1]: https://blog.csdn.net/qq_38517015/article/details/119986510