CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。
它允许浏览器向跨源服务器,发出XMLHttpRequest
请求,从而克服了AJAX只能同源使用的限制。
本文详细介绍CORS的内部机制。
一、简介
CORS需要浏览器和服务器同时支持。目前,所有浏览器都支持该功能,IE浏览器不能低于IE10。
整个CORS通信过程,都是浏览器自动完成,不需要用户参与。对于开发者来说,CORS通信与同源的AJAX通信没有差别,
代码完全一样。浏览器一旦发现AJAX请求跨源,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户
不会有感觉。因此,实现CORS通信的关键是服务器。只要服务器实现了CORS接口,就可以跨源通信。
- CORS的原理:
CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。
实现此功能非常简单,只需由服务器发送一个响应标头即可。
假设我们页面或者应用已在
http://www.test1.com 上了,而我们打算从
http://www.test2.com 请求提取数据。一般情况下,
如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,"
跨域"也就以此由来。
利用 CORS,
http://www.test2.com 只需添加一个标头,就可以允许来自
http://www.test1.com 的请求,下图是我在PHP中的
hander() 设置,
“*”号表示允许任何域向我们的服务端提交请求:
当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,
其中见红框中有一项信息是“
Access-Control-Allow-Origin:* ”,表示我们已经启用CORS,
CORS与JSONP的使用目的相同,但是比JSONP更强大。
JSONP只支持GET
请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的
网站请求数据。 post比get传输的数据量要大,如果数据量比较大时CORS时不二的选择。
顺便说一下,cors在移动端支持的很好!
假设我们页面或者应用已在
http://www.test1.com 上了,而我们打算从
http://www.test2.com 请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,"
跨域"也就以此由来。
利用 CORS,
http://www.test2.com 只需添加一个标头,就可以允许来自
http://www.test1.com 的请求,下图是我在PHP中的 hander() 设置,
“*”号表示允许任何域向我们的服务端提交请求:
当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,其中见红框中有一项信息是“
Access-Control-Allow-Origin:* ”,表示我们已经启用CORS,