所谓的跨域问题

1.跨域是什么意思？

首先一个url是由：协议、域名、端口 三部分组成。（一般端口默认80）
如：https://blog.moonlet.cn:80

当一个请求url的协议、域名、端口三者之间的任意一个与当前页面url不同即为跨域。
例如:

当前页面url		被请求页面url		是否跨域		原因
http://www.testlocation.com/		http://www.testlocation.com/i...		否		同源（协议、域名、端口号相同）
http://www.testlocation.com/		https://www.testlocation.com/...		跨域		协议不同（http/https）
http://www.testlocation.com/		http://www.baidu.com/		跨域		主域名不同（test/baidu）
http://www.testlocation.com/		http://blog.testlocation.com/		跨域		子域名不同（www/blog）
http://www.testlocation.com:8...		http://www.testlocation.com:7...		跨域		端口号不同（8080/7001）

————————————————

2.跨域产生原因？

出于浏览器的同源策略限制。

<pre class="hljs language-mipsasm" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;"> 同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。
所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）。</pre>

非同源会出现的限制

<pre class="hljs language-mipsasm" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">无法读取非同源网页的cookie、localstorage等
无法接触非同源网页的DOM和js对象 无法向非同源地址发送Ajax请求</pre>

3.nginx反向代理解决跨域（前端常用）
正向代理：

<pre class="hljs language-css" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">a-->b访问不了，可以找个中间的服务器c, 先访问c再从c到b,类似曲线救国。
明确访问的目的地，但是用户不知道中间的代理服务器。（忽略中间服务器）</pre>

反向代理：a--> c <--b

<pre class="hljs language-llvm" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">a明确访问c代理服务器，但是不知道c的内容从哪里来，c反向从别的地方拿来数据。(忽略的是目标地址)</pre>

浏览器可以访问a,而服务器之间不存在跨域问题，浏览器先访问a的服务器c，让c服务器作为代理去访问b服务器,拿到之后再返回数据给a。

例如：

<pre class="hljs language-awk" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">nginx是静态服务器，跨域请求放在api下面好管理http://www.baidu.com:80/api/user
可以在nginx下面的config下面的nginx.conf里面配置
从80端口进来的就拦截一下，代理到81端口

server{
location /api {
//拦截一下
proxy_pass http://www.baidu.com:81;
}
}</pre>

4.添加响应头解决跨域

浏览器先询问b,b允许a访问
access-control-allow-origin
access-control-max-age
PHP端修改header：

<pre class="hljs language-awk" style="box-sizing: border-box; font-family: var(--bs-font-monospace); font-size: 0.875em; direction: ltr; unicode-bidi: bidi-override; display: block; margin-top: 0px !important; margin-bottom: 1.25rem; overflow: auto; color: rgb(36, 41, 46); background: rgb(233, 236, 239); padding: 1rem; max-height: 35rem; line-height: 1.5; position: relative; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式</pre>

5.通过jsonp解决跨域（老方法）

实现原理：通常为了减轻web服务器的负载，我们把js、css、图片等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许。

html中有的标签天然支持跨域，比如<script src="http://www.baidu.com"></script>但是只支持get请求。

6.CORS解决跨域 (第三方模块)

它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

浏览器端：

目前，所有浏览器都支持该功能（IE10以下不行）。整个CORS通信过程，都是浏览器自动完成，不需要用户参与。

服务端：

CORS通信与AJAX没有任何差别，因此你不需要改变以前的业务逻辑。只不过，浏览器会在请求中携带一些头信息，我们需要以此判断是否运行其跨域，然后在响应头中加入一些信息即可。这一般通过过滤器完成即可。

优势：

在服务端进行控制是否允许跨域，可自定义规则
支持各种请求方式

缺点：

会产生额外的请求