跨域详解

1、跨域是什么意思？

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

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

当前页面ur	被请求页面url	是否跨域	原因
https://blog.moonlet.cn	https://blog.moonlet.cn/archives/550	否	同源（协议、域名、端口号相同）
http://blog.moonlet.cn	https://blog.moonlet.cn/archives/550	跨域	协议不同（http/https）
https://blog.moonlet.cn	https://www.baidu.com	跨域	主域名不同
https://blog.moonlet.cn	https://www.moonlet.cn	跨域	子域名不同（www/blog）
https://blog.moonlet.cn:80	https://blog.moonlet.cn:8080	跨域	端口号不同（80/8080）

2、跨域产生原因？

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

②同源策略（Same Orgin Policy）是一种约定，它是浏览器核心也最基本的安全功能，它会阻止一个域的js脚本和另外一个域的内容进行交互，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

③所谓同源（即在同一个域）就是两个页面具有相同的协议（protocol）、主机（host）和端口号（port）

④非同源会出现的限制：

• 无法读取非同源网页的cookie、localstorage等

• 无法接触非同源网页的DOM和js对象

• 无法向非同源地址发送Ajax请求

3、nginx反向代理解决跨域

正向代理：

a-->b-->c：a-->b访问不了，可以找个中间的服务器c，先访问c再从c到b，类似曲线救国。

明确访问的目的地，但是用户不知道中间的代理服务器。（忽略中间服务器）

反向代理：

a--> c <--b：a明确访问c代理服务器，但是不知道c的内容从哪里来，c反向从别的地方拿来数据。(忽略的是目标地址)

4、添加响应头解决跨域

浏览器先询问b，b允许a访问

access-control-allow-origin

access-control-max-age

PHP端修改header：
header('Access-Control-Allow-Origin:*');//允许所有来源访问
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式

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

实现原理：通常为了减轻web服务器的负载，我们把js、css、图片等静态资源分离到另一台独立域名的服务器上

在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许。html中有的标签天然支持跨域，比如但是只支持get请求。