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

浏览器的同源策略

不同协议、不同端口、不同域名。满足其中一个都会被浏览器的同源策略阻止，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跨域请求，重复提交问题
• 配置nginx实现反向代理解决跨域问题
• 正向代理与反向代理区别图解
• 一篇文章让你搞懂如何通过Nginx来解决跨域问题
• 通过nginx反向代理解决跨域