前端跨域问题之----CORS详解

    xiaoxiao2024-02-01  144

    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() 设置, “*”号表示允许任何域向我们的服务端提交请求:          也可以设置指定的域名,如域名 http://www.test2.com ,那么就允许来自这个域名的请求               当前我设置的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() 设置, “*”号表示允许任何域向我们的服务端提交请求:          也可以设置指定的域名,如域名 http://www.test2.com ,那么就允许来自这个域名的请求               当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,其中见红框中有一项信息是“ Access-Control-Allow-Origin:* ”,表示我们已经启用CORS, 相关资源:敏捷开发V1.0.pptx
    最新回复(0)