实现跨域请求的几种方式

作者 Kovii Ma 日期 2018-07-03
JSS
实现跨域请求的几种方式

同源策略

基本概念

源（origin）就是协议、域名和端口号。

http://www.company.com:80
协议：http
域名：www.company.com
端口号：80

同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

不受同源策略限制的：

  1. 页面中的链接，重定向以及表单提交是不会受到同源策略限制的。
  2. 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>，<img>，<link>，<iframe>等。

跨域的实现

1. 图片ping或script标签跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 图片ping
function imgPing(url) {
    var img = new Image();
    img.src = url;
    img.onload = function () {
        console.log(`img-url:${url}...success`)
    }
    img.onerror = function () {
        console.error(`img-url:${url}...faild`)
    }
}


//script标签跨域

图片ping常用于跟踪用户点击页面或动态广告曝光次数。
script标签可以得到从其他来源数据，这也是JSONP依赖的根据。

缺点：只能发送Get请求 ，无法访问服务器的响应文本（单向请求）

2. JSONP跨域

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function addScriptTag(src) { 
    var script = document.createElement('script'); 
    script.setAttribute("type","text/javascript"); 
    script.src = src; 
    document.body.appendChild(script);
}

//window.onload是为了让页面加载完成后再执行
window.onload = function () { 
    addScriptTag('http://b.com/main.js?callback=foo');
} 

function foo(data) { 
    console.log(data.name+"欢迎您");
}

采用jsonp跨域也存在问题：

  1. 使用这种方法，只要是个网站都可以拿到b.com里的数据，存在安全性问题。需要网站双方商议基础token的身份验证，这里不详述。
  2. 只能是GET，不能POST。
  3. 可能被注入恶意代码，篡改页面内容，可以采用字符串过滤来规避此问题。

3. CORS

​ Cross-Origin Resource Sharing（CORS）跨域资源共享是一份浏览器技术的规范，提供了 Web 服务从不同域传来沙盒脚本的方法，以避开浏览器的同源策略，确保安全的跨域数据传输。现代浏览器使用CORS在API容器如XMLHttpRequest来减少HTTP请求的风险来源。与 JSONP 不同，CORS除了GET要求方法以外也支持其他的 HTTP 要求。服务器一般需要增加如下响应头的一种或几种：

1
2
3
4
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

4. window.name+iframe

window.name通过在iframe（一般动态创建）中加载跨域HTML文件来起作用。然后，HTML文件将传递给请求者的字符串内容赋值给window.name。然后，请求者可以检索window.name值作为响应。

- iframe标签的跨域能力；
- window.name属性值在文档刷新后依旧存在的能力（且最大允许2M左右）。

每个iframe都有包裹它的window，而这个window是top window的子窗口。contentWindow属性返回

5. window.postMessage()

HTML5新特性，可以用来向其他所有的window对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送MessageEvent，如果在函数执行的过程中调用了它，就会让后面的函数超时无法执行。

6. 修改document.domain跨子域

前提条件：这两个域名必须属于同一个基础域名!而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域，所以只能跨子域

​ 在根域范围内，允许把domain属性的值设置为它的上一级域。例如，在”aaa.xxx.com”域内，可以把domain设置为“xxx.com”但不能设置为 “xxx.org”或者”com”。

​ 现在存在两个域名aaa.xxx.com和bbb.xxx.com。在aaa下嵌入bbb的页面，由于其document.name不一致，无法在aaa下操作bbb的js。可以在aaa和bbb下通过js将document.name = 'xxx.com';设置一致，来达到互相访问的作用。

7. websocket

WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯

需要注意：WebSocket对象不支持DOM 2级事件侦听器，必须使用DOM 0级语法分别定义各个事件。

8. 代理

同源策略是针对浏览器端进行的限制，可以通过服务器端来解决该问题

DomainA客户端（浏览器） ==> DomainA服务器 ==> DomainB服务器 ==> DomainA客户端（浏览器）

FEATURED TAGS
JSS
FRIENDS