跨域简析

1. 同源策略

同源:

URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。

同源策略:

同源策略是浏览器的一种安全机制。总体来说，它就是限制了跨域资源访问。但是对不同的资源会有些许不同。

• DOM访问的同源策略:禁止非同源脚本语言访问DOM元素。
• XMLHttpRequest的同源策略:禁止ajax请求非同源资源。
• Cookie的同源策略:浏览器只会将cookie带网同源服务器。
• <script><img><link><iframe>标签的同源策略:可以跨源加载资源。

2.跨域

由于浏览器同源策略的影响，跨域访问资源受到了限制。由下图说明哪些环节会受到影响。

1. 浏览器正常请求一个9000的html页面
2. html页面中的<script>标签跨域请求js和css资源。（可以跨域加载资源）
3. js用XMLHttpRequest（ajax）请求8080的接口系统。(跨域请求资源失败)
4. <iframe>标签跨域加载8888的页面。（可以跨域加载资源）
5. <iframe>加载的js资源访问了父页面的DOM。（跨域访问失败）

3.常见解决方案

1)Ajax跨域

• JSONP（回调函数+数据）

  利用<script>标签可以跨域请求资源的特性，先用<script>请求数据，再回调页面上的回调函数。

  注意:1.JSONP并没有使用XMLHttpRequest,JSONP并不是ajax的一个特例。2.它只支持GET请求。

• 跨域资源共享CORS

  它是W3C标准，是跨源AJAX请求的根本解决方法。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
  浏览器发送一个带有Orgin字段的HTTP请求头，用来表明请求来源。服务器的Access-Control-Allow-Origin响应头表明该服务器允许哪些源的访问，一旦不匹配，浏览器就会拒绝资源的访问。

  一开始我们系统的解决方案就是CORS。

  预检请求（之前发现每次ajax请求F12都能抓到两次请求，浏览器针对非简单请求会发送CORS预检请求。非简单请求见链接~简单请求）。

  

• Proxy反向代理解决问题

  nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。
  简单说，nginx服务器欺骗了浏览器，让它认为这是同源调用，从而解决了浏览器的跨域问题。