JavaScript跨域(3):HTTP access control (CORS)跨域
网上看了很多博客和文档,感觉还是Mozilla大大写的最简单、最好懂,不过文字很长。。 https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS 要整篇翻译,我肯定吃不消,当然也没这个必要,下面就提要说一点吧,这个方法还存在兼容性问题,尽
网上看了很多博客和文档,感觉还是Mozilla大大写的最简单、最好懂,不过文字很长。。
https://developer.mozilla.org/en-US/docs/HTTP/Access_control_CORS
要整篇翻译,我肯定吃不消,当然也没这个必要,下面就提要说一点吧,这个方法还存在兼容性问题,尽管有相应的解决手段,但是觉得用起来不是特别爽。
Cross-site HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. For instance, a resource loaded from Domain A (http://domaina.example) such as an HTML web page, makes a request for a resource on Domain B (http://domainb.foo), such as an image, using the
img
element (http://domainb.foo/image.jpg). This occurs very commonly on the web today — pages load a number of resources in a cross-site manner, including CSS stylesheets, images and scripts, and other resources.
跨站点的HTTP请求也就是从一个域名向另一个域名发送请求(POST,GET等),比如,从http://a.com向http://b.com请求一张图片(http://b.com/images.jpg),这种请求或者说这种现象是时有发生的,所以找到一个好方法来处理这类问题也是十分有必要的。
Mozilla大大说
如下,我们在http://foo.example向页面http://bar.example发送请求:
var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/public-data/'; function callOtherDomain() { if(invocation) { invocation.open('GET', url, true); invocation.onreadystatechange = handler; invocation.send(); } }
可以看看服务器对浏览器的响应
GET /resources/public-data/ HTTP/1.1 Host: bar.other User-Agent: Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1b3pre) Gecko/20081130 Minefield/3.1b3pre Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Connection: keep-alive Referer: http://foo.example/examples/access-control/simpleXSInvocation.html Origin: http://foo.example HTTP/1.1 200 OK Date: Mon, 01 Dec 2008 00:23:53 GMT Server: Apache/2.0.61 Access-Control-Allow-Origin: * Keep-Alive: timeout=2, max=100 Connection: Keep-Alive Transfer-Encoding: chunked Content-Type: application/xml [XML Data]
这些都是关于HTTP的一些数据和参数,如果不太明白的话,可以看看这本书《HTTP权威指南》
前半截是FF3.5发送的文件头请求,后半截是服务器的响应。你应该注意到了我标红的那些字,这个就是本文要讲述的重点。
在请求之前,我们也可以自己设定一些服务器要响应的内容
var invocation = new XMLHttpRequest(); var url = 'http://bar.other/resources/post-here/'; var body = ''; function callOtherDomain(){ if(invocation) { invocation.open('POST', url, true); invocation.setRequestHeader('X-PINGOTHER', 'pingpong'); invocation.setRequestHeader('Content-Type', 'application/xml'); invocation.onreadystatechange = handler; invocation.send(body); } ...... Arun
setRequestHeader顾名思义就是设置请求头的一些参数。
上面说了半天也就是告诉大家一些服务器和客户端相关参数设置和解释,还没太涉及到跨域的东西。
Cross Domain [跨域]
这是我放到SAE上的一段代码(http://1.qianduannotes.sinaapp.com/test/ACAO.php)
php header("Access-Control-Allow-Origin: *"); //header("Access-Control-Allow-Origin: http://yourURL.com"); echo "hello world"; ?>
如果我没加header("Access-Control-Allow-Origin: *")这句话,你通过ajax或者其他方式来请求这个数据是会报错的,不信就可以试试这个链接http://1.qianduannotes.sinaapp.com/test/ACAO_none.php
其中的“*”表示所有域都可以访问,如果将Access-Control-Allow-Origin设置为一个特定的URL,那这个文件就只能被特定URL以及他的子域(http://yoururl.com/sub/)访问。
Compatibility [兼容性]
Show all versions | IE | Firefox | Chrome | Safari | Opera | iOS Safari | Opera Mini | Android Browser | Blackberry Browser |
---|---|---|---|---|---|---|---|---|---|
2.1 | |||||||||
2.2 | |||||||||
3.2 | 2.3 | ||||||||
4.0-4.1 | 3.0 | ||||||||
8.0 | 24.0 | 4.2-4.3 | 4.0 | ||||||
9.0 | 19.0 | 25.0 | 5.1 | 5.0-5.1 | 4.1 | ||||
Current | 10.0 | 20.0 | 26.0 | 6.0 | 12.1 | 6.0 | 5.0-7.0 | 4.2 | 7.0 |
Near future | 21.0 | 27.0 | 10.0 | ||||||
Farther future | 22.0 | 28.0 |
最明显的就是IE(8、9)的bug,可以通过XDomainRequest来解决。
// 1. Create XDR object var xdr = new XDomainRequest(); // 2. Open connection with server using GET method xdr.open("get", "http://www.contoso.com/xdr.aspx"); // 3. Send string data to server xdr.send();
下面附上一个MSDN上的DEMO
XDomainRequest From MSDN
html>
script type="text/javascript">
var xdr;
function readdata()
{
var dRes = document.getElementById('dResponse');
dRes.innerText = xdr.responseText;
alert("Content-type: " + xdr.contentType);
alert("Length: " + xdr.responseText.length);
}
function err()
{
alert("XDR onerror");
}
function timeo()
{
alert("XDR ontimeout");
}
function loadd()
{
alert("XDR onload");
alert("Got: " + xdr.responseText);
}
function progres()
{
alert("XDR onprogress");
alert("Got: " + xdr.responseText);
}
function stopdata()
{
xdr.abort();
}
function mytest()
{
var url = document.getElementById('tbURL');
var timeout = document.getElementById('tbTO');
if (window.XDomainRequest)
{
xdr = new XDomainRequest();
if (xdr)
{
xdr.onerror = err;
xdr.ontimeout = timeo;
xdr.onprogress = progres;
xdr.onload = loadd;
xdr.timeout = tbTO.value;
xdr.open("get", tbURL.value);
xdr.send();
}
else
{
alert('Failed to create');
}
}
else
{
alert('XDR doesn't exist');
}
}
XDomainRequest
Reference [参考资料]
1.Mozilla
2.MSDN
3.http://caniuse.com/
4.屈屈(关闭了页面,链接给忘了,^_^)
上一篇: Java 实例 - 获取向量元素的索引值
推荐阅读
-
net core 3.1 跨域 Cors 找不到 “Access-Control-Allow-Origin”
-
JavaScript中的HTTP跨域请求
-
已解决:No 'Access-Control-Allow-Origin'跨域问题
-
开发中解决Access-Control-Allow-Origin跨域问题的Chrome神器插件,安装及使用
-
多域名跨域请求 (Access-Control-Allow-Origin)
-
No‘Access-Control-Allow-Origin‘ header is present on the requested resource.解决跨域请求问题
-
跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is
-
Postwoman跨域问题 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present
-
nginx静态资源服务配置了Access-Control-Allow-Origin等属性,部分请求还是会出现跨域的问题
-
Access-Control-Allow-Origin和反向代理处理跨域