关于跨域的那些事

什么是跨域

只要协议、域名、端口有任何一个不同,都被当作是不同的域。
同源策略:同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。

URL                                 说明                  是否允许通信
http://www.a.com/a.js
http://www.a.com/b.js               同一域名下             允许

http://www.a.com/lab/a.js
http://www.a.com/script/b.js        同一域名下不同文件夹    允许

http://www.a.com:8000/a.js
http://www.a.com/b.js               同一域名,不同端口      不允许

http://www.a.com/a.js
https://www.a.com/b.js              同一域名,不同协议      不允许

http://www.a.com/a.js
http://70.32.92.74/b.js             域名和域名对应ip        不允许

http://www.a.com/a.js
http://script.a.com/b.js            主域相同,子域不同      不允许

http://www.a.com/a.js
http://a.com/b.js                   同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)

http://www.cnblogs.com/a.js
http://www.a.com/b.js               不同域名               不允许

端口和协议的不同,只能通过后台来解决。

Ajax请求不同源的跨域

通过CORS跨域

CORS(Cross-Origin Resource Sharing) 跨域资源共享,定义了必须在访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是失败。服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。

跨源资源共享标准( cross-origin sharing standard) 使得以下场景可以使用跨站 HTTP 请求:

  • 使用 XMLHttpRequest 或 Fetch发起跨站 HTTP 请求
  • Web 字体 (CSS 中通过 @font-face 使用跨站字体资源),因此,网站就可以发布 TrueType 字体资源,并只允许已授权网站进行跨站调用
  • WebGL 贴图
  • 使用drawImage绘制
  • Images/video 画面到canvas
  • 样式表(使用 CSSOM)
  • Scripts (for unmuted exceptions)
    所有浏览器都支持该功能,IE浏览器不能低于IE10。通过 XMLHttpRequest 对象发起。但Internet Explorer 8 和 9 可以通过 XDomainRequest 对象来实现CORS。可以把CORS分为:简单请求、预请求和附带凭证信息的请求。

    通过JSONP跨域

    JSONP(JSON with padding) 也叫填充式JSON,是应用JSON的一种新方法,只不过是被包含在函数调用中的JSON。
  • JSONP由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数,而数据就是传入回调函数中的JSON数据。
  • 基本原理:网页通过添加一个