共计 1560 个字符，预计需要花费 4 分钟才能阅读完成。
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. 跨域产生起因？
出于浏览器的 同源策略 限度。
同源策略（Same Orgin Policy）是一种约定，它是浏览器外围也最根本的平安性能，它会阻止一个域的 js 脚本和另外一个域的内容进行交互，如果短少了同源策略，浏览器很容易受到 XSS、CSFR 等攻打。所谓同源（即在同一个域）就是两个页面具备雷同的协定（protocol）、主机（host）和端口号（port）。非同源会呈现的限度
无奈读取非同源网页的 cookie、localstorage 等
无奈接触非同源网页的 DOM 和 js 对象
无奈向非同源地址发送 Ajax 申请3.nginx 反向代理解决跨域（前端罕用）正向代理：
a-->b 拜访不了，能够找个两头的服务器 c, 先拜访 c 再从 c 到 b, 相似曲线救国。明确拜访的目的地，然而用户不晓得两头的代理服务器。（疏忽两头服务器）反向代理：a--> c <--b
a 明确拜访 c 代理服务器，然而不晓得 c 的内容从哪里来，c 反向从别的中央拿来数据。(疏忽的是指标地址)浏览器能够拜访 a, 而服务器之间不存在跨域问题，浏览器先拜访 a 的服务器 c，让 c 服务器作为代理去拜访 b 服务器, 拿到之后再返回数据给 a。
例如：
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;
}
}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 中有的标签人造反对跨域，比方 <script src=”http://www.baidu.com”></script> 然而只反对 get 申请。
正文完
