JS跨域访问解决方案的总结.doc_如何解决跨域请求资源-CSDN文库

JS跨域访问

2星需积分: 12 44 浏览量 2012-10-12 13:52:19 上传评论收藏 203KB DOC 举报

资源推荐

资源详情

资源评论

JS 跨域访问解决方案总结

0 引言：

跨域请求，顾名思义，就是一个站点中的资源去访问另外一个不同域名站点上的资

源。这种情况很常见，比如说通过 style 标签加载外部样式表文件、通过 img 标

签加载外部图片、通过 script 标签加载外部脚本文件、通过 Web font 加载字体

文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same

origin policy）。

同源策略：如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。

同源策略是为了防止从一个地址加载的文档或脚本访问或者设置从另外一个地址加

载的文档的属性。如果两个页面的主域名相同，则还可以通过设置

document.domain 属性将它们认为是同源的。

随着 Web2.0 和 SNS 的兴起，Web 应用对跨域访问的需求也越来越多，但在脚

本中进行跨域请求是受安全性限制的，Web 开发人员迫切需要提供一种更安全、

方便的跨域请求方式来融合（Mashup）自己的 Web 应用。这样做的一个好处就

是可以将请求分摊到不同的服务器，减轻单个服务器压力以提高响应速度；另外一

个好处是可以将不同的业务逻辑分布到不同的服务器上以降低负载。

值得庆幸的是，跨域请求的标准已经出台，主流浏览器也已经实现了这一标准。

W3C 工作组中的 Web Applications Working Group（Web 应用工作组）发布

了一个 Cross-Origin Resource Sharing（跨域资源共享规范）推荐规范来

解决跨域请求的问题。该规范提供了一种更安全的跨域数据交换方法。具体规范的

介绍可以访问上面提供的网站地址。值得注意的是：该规范只能应用在类似

XMLHttprequest 这样的 API 容器内。IE8、Firefox 3.5 及其以后的版本、

Chrome 浏览器、Safari 4 等已经实现了 Cross-Origin Resource Sharing 规

范，已经可以进行跨域请求了。

一、支持跨域访问处理浏览器

Cross-Origin Resource Sharing 的工作方式是通过添加 HTTP 头的方法来判断

哪些资源允许 Web 浏览器访问该域名下的信息。然而，对于那些 HTTP 请求导致

用户数据产生副作用的请求方法（特别是对于除了 GET、某些 MIME 类型的

POST 之外的 HTTP 方法），该规范要求浏览器对请求进行“预先验”，通过发送

HTTP 的 OPTIONS 请求头询问服务器有哪些支持的方法，在征得服务器的同意后，

再使用实际的 HTTP 请求方法发送实际的请求。服务器也可以通知客户端是否需

要将验证信息（如 Cookie 和 HTTP Authentication 数据）随同请求一起发送。

下面我们就采用实际的例子说明 Cross-Origin Resource Sharing 是如何工作的。

1，简单请求

什么样的请求算是简单请求呢？简单请求必须满足下面 2 点：

a，只使用 GET、POST 进行的请求，这里的 POST 只包括发送给服务器的数据类

型（Content-Type）必须是 application/x-www-form-

urlencoded、multipart/form-data 或者 text/plain 中一个。

b，HTTP 请求没有设置自定义的请求头，如我们常用的 X-JSON。

先使用下面的代码进行测试：

XML/HTML 代码

1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"



2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>

3. <htmlxmlns="http://www.w3.org/1999/xhtml">

4. <head>

5. <title>孟宪会之 AJAX 跨域请求测试</title>

6. </head>

7. <body>

8. <inputtype='button'value='开始测试'onclic

k='crossDomainRequest()'/>

9. <divid="content"></div>

10. <mce:scripttype="text/javascript"><!--

11. varxhr=newXMLHttpRequest();

12. varurl='http://dotnet.aspx.cc/

SimpleCrossSiteRequests.aspx';

13. functioncrossDomainRequest(){

14. document.getElementById("content").innerHTML="开始……";



15. if(xhr){

16. xhr.open('GET',url,true);

17. xhr.onreadystatechange=handler;

18. xhr.send();

19. }else{

20. document.getElementById("content").innerHTML="不能创

建 XMLHttpRequest";

21. }

22. }

23. functionhandler(evtXHR){

24. if(xhr.readyState==4){

25. if(xhr.status==200){

26. varresponse=xhr.responseText;

27. document.getElementById("content").innerHTML="结

果："+response;

28. }else{

29. document.getElementById("content").innerHTML="不允

许跨域请求。";

30. }

31. }

32. else{

33. document.getElementById("content").innerHTML+="<br/>

执行状态 readyState："+xhr.readyState;

34. }

35. }

36. //--></mce:script>

37. </body>

38. </html>

然后，在服务器创建 CrossDomainRequest.aspx 的内容如下：

C# 代码

1. <%@PageLanguage="C#"%>

2. <mce:scriptrunat="server"><!--

3. protectedvoidPage_Load(objectsender,EventArgse)

4. {

5. Response.AddHeader("Access-Control-Allow-Origin","http://

www.meng_xian_hui.com:801");

6. Response.Write("孟宪会向各位朋友发来贺电：你的第一个跨域测试成功

啦！！！");

7. }

8. //--></mce:script>

点击 “开始测试” 按钮，发送的请求和返回的响应信息如下：

XML/HTML 代码

1. GET/SimpleCrossSiteRequests.aspxHTTP/1.1

2. Host:dotnet.aspx.cc

3. User-Agent:Mozilla/5.0(Windows;U;WindowsNT5.2;zh-CN;rv:

1.9.1.7)Gecko/20091221Firefox/3.5.7(.NETCLR3.5.30729)

4. Accept:text/html,application/xhtml+xml,application/

xml;q=0.9,*/*;q=0.8

5. Accept-Language:zh-cn,zh;q=0.5

6. Accept-Encoding:gzip,deflate

7. Accept-Charset:GB2312,utf-8;q=0.7,*;q=0.7

8. Keep-Alive:300

9. Connection:keep-alive

10. Referer:http://www.meng_xian_hui.com:801/CrossDomainAjax/

SimpleCrossSiteRequests.html

11. Origin:http://www.meng_xian_hui.com:801

12. HTTP/1.x200OK

13. Date:Sun,10Jan201013:52:00GMT

14. Server:Microsoft-IIS/6.0

15. X-Powered-By:ASP.NET

16. X-AspNet-Version:2.0.50727

17. Access-Control-Allow-Origin:http://www.meng_xian_hui.com:801

18. Set-Cookie:ASP.NET_SessionId=wk5v5nrs5wbfi4rmpjy2jujb;pat

h=/;HttpOnly

19. Cache-Control:private

20. Content-Type:text/html;charset=utf-8

21. Content-Length:84

需要特别注意的是：在请求信息中，浏览器使用 Origin 这个 HTTP 头来标识该请

求来自于 http://www.meng_xian_hui.com:801；在返回的响应信息中，使用

Access-Control-Allow-Origin 头来控制哪些域名的脚本可以访问该资源。如果

设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。如果

有多个，则只需要使用逗号分隔开即可。

注意：在服务器端，Access-Control-Allow-Origin 响应头

http://www.meng_xian_hui.com:801 中的端口信息不能省略。

有人可能会想：自己发送请求头会如何呢？比如

xhr.setRequestHeader("Origin","http://www.meng_xian_hui.com:801");

实践证明，自己设置 Origin 头是不行的。

是不是现在就可以采用 XMLHttpRequest 来请求任意一个网站的数据呢？还是不

行的。允许哪些域名可以访问，还需要服务器来设置 Access-Control-Allow-

Origin 头来进行授权，具体的代码是：

Response.AddHeader("Access-Control-Allow-Origin",

"http://www.meng_xian_hui.com:801");

这行代码就告诉浏览器，只有来自 http://www.meng_xian_hui.com:801 源下

的脚本才可以进行访问。

好了，上面我们就完成了一个简单的跨域请求，怎么样？感觉还是不错的吧。下面

我们进行一个“预检”请求。

2，预检请求

预检请求首先需要向另外一个域名的资源发送一个 HTTP OPTIONS 请求头，其目

的就是为了判断实际发送的请求是否是安全的。下面的 2 种情况需要进行预检：

a，不是上面的简单请求，比如使用 Content-Type 为 application/xml 或 text/xml 的

剩余23页未读，继续阅读

评论收藏

内容反馈

sunmantan007

2013-08-04

还行可以使用
qikexun

2013-01-06

还行可以使用

zdzyh1989

粉丝: 0
资源: 1

JS跨域访问解决方案的总结.doc

js跨域访问解决方案总结

JS跨域访问解决方案总结

图书馆管理系统系统解决方案文档.doc

2019年大数据优秀产品和应用解决方案案例.doc.pdf

2019年大数据优秀产品和应用解决方案案例.doc.docx

2019年大数据优秀产品和应用解决方案案例.doc (2).docx

JS跨域访问解决方案总结.pdf

JS跨域总结

JS跨域访问解决

JS跨域访问解决方案总结[参照].pdf

精诚MES条码生产追溯系统电池电子制造业解决方案1.doc.pdf

2019年大数据优秀产品和应用解决方案案例.doc (2).pdf

跨域页面访问问题解决.doc

Ajax跨域访问解决方案.doc

医院设备科管理系统解决方案.doc

JS跨域访问

Javascript跨域访问解决方案

Javascript 跨域访问解决方案

JQuery跨域访问解决方案

企业局域网安全访问控制解决方案介绍1.doc.pdf

Hadoop-2.0中单点故障项目解决方案总结.doc

教育行业一站式信息化平台解决方案.doc.docx

(安元)移动终端安全管理解决方案.doc.docx

[合同&协议书]新三板：常见疑难问题及解决方案总结.doc

最新资源