JavaScript 学习笔记 - 网络请求与远程资源（三）

from 《JavaScript 高级程序设计》第四版 第24章 网络请求与远程资源

--------------------------------------------------------------------------------------------------------------------

一、跨源资源共享

通过 XHR 进行 Ajax 通信的一个主要限制是跨源安全策略。默认情况下，XHR 只能访问与发起请求的页面在同一个域内的资源。这个安全限制可以防止某些恶意行为。不过，浏览器也需要支持合法跨源访问的能力。

跨源资源共享（CORS，Cross-Origin Resource Sharing）定义了浏览器与服务器如何实现跨源通信。CORS背后的基本思路就是使用自定义的HTTP头部允许浏览器和服务器相互了解，以确实请求或响应应该成功还是失败。

对于简单的请求，比如GET 或 POST 请求，没有自定义头部，而且请求体是 text/plain 类型，这样的请求在发送时会有一个额外的头部叫 Origin。Origin 头部包含发送请求的页面的源（协议、域名和端口），以便服务器确定是否为其提供响应。下面是 Origin 头部的一个示例：

Origin: http://www.nczonline.net

如果服务器决定响应请求，那么应该发送 Access-Control-Allow-Origin 头部，包含相同的源；或者如果资源是公开的，那么就包含 “*”。比如：

Access-Control-Allow-Origin: http://www.nczonline.net

如果没有这个头部，或者有但源不匹配，则表明不会响应浏览器请求。否则服务器就会处理这个请求。注意，无论请求还是响应都不会包括 cookie 信息。

现代浏览器通过XMLHttpRequest 对象原生支持 CORS。在尝试访问不同源的资源时，这个行为会被自动触发。要向不同域的源发送请求，可以使用标准 XHR 对象并给 open() 方法传入一个绝对URL。

跨域 XHR 对象允许访问 status 和 statusText 属性，也允许同步请求。出于安全考虑，跨域 XHR 对象也施加了一些额外限制。

1）不能使用setRequestHeader() 设置自定义头部

2）不能发送和接收 cookie

3）getAllResponseHeaders() 方法始终返回空字符串

因为无论同域还是跨域请求都使用同一个接口，所以最好在访问本地资源时使用相对URL，在访问远程资源时使用绝对 URL。这样可以更明确地区分使用场景，同时避免出现访问本地资源时出现头部或 cookie 信息访问受限的问题。

 

 

二、替代性跨源技术

 

CORS 出现之前，实现跨源 Ajax 通信是有点麻烦的。开发者需要依赖能够执行跨源请求的 DOM 特性，在不使用 XHR 对象情况下发送某种类型的请求。虽然 CORS 目前已经得到广泛支持，但这些技术仍然没有过时，因为它们不需要修改服务器。

1）图片探测

2）JSONP，JSONP 调用是通过动态创建 <script> 元素并为 src 属性指定跨域 URL 实现的。此时的 <script> 与 <img> 元素类似，能够不受限制地从其他域加载资源。