前端跨域--CORS机制

版权声明:如果喜欢,就收藏吧 O(∩_∩)O~ https://blog.csdn.net/caseywei https://blog.csdn.net/caseywei/article/details/89486988

简介

       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:*");

  也可以设置指定的域名,如域名 http://www.test2.com ,那么就允许来自这个域名的请求:header("Access-Control-Allow-Origin:http://www.test2.com");

        当前我设置的header为“*”,任意一个请求过来之后服务端我们都可以进行处理&响应,那么在调试工具中可以看到其头信息设置,

其中见红框中有一项信息是“Access-Control-Allow-Origin:* ”,表示我们已经启用CORS,

CORS与JSONP对比:

         CORS与JSONP的使用目的相同,但是比JSONP更强大。

         JSONP只支持GET请求,CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器,以及可以向不支持CORS的

         网站请求数据。 post比get传输的数据量要大,如果数据量比较大时CORS时不二的选择。

         顺便说一下,cors在移动端支持的很好!

猜你喜欢

转载自blog.csdn.net/caseywei/article/details/89486988