`
lujj9801
  • 浏览: 1051 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

跨域资源共享(Cross-Origin Resource Sharing)实现Ajax跨域请求

 
阅读更多


最近正在做的几个项目都用到了Ajax跨域请求，由于处于安全的角度，Firefox、Chrome等很多浏览器（IE除开）都不允许跨域请求或调用，折腾好久，终于解决了Ajax跨域请求这个蛋疼的问题，在网上也找了很久的资料，尝试N次都失败，今天在无意之中看到一篇跨域资源共享的文章，这让我轻松的解决了跨域问题，不多说。

跨域请求，就是一个站点中的资源去访问另外一个不同域名站点上的资源。这种情况很常见，比如说通过 <link> 标签加载外部样式表文件、通过 <img> 标签加载外部图片、通过 <script> 标签加载外部脚本文件等等。默认情况下，脚本访问文档属性等数据采用的是同源策略（Same origin policy）。

如果两个页面的协议、域名和端口是完全相同的，那么它们就是同源的。 如果两个页面的主域名相同，则还可以通过设置 document.domain 属性将它们认为是同源的。

随着 Web2.0 和 社交网络 的兴起，Web 应用对跨域访问的需求也越来越多，但是在脚本中进行跨域请求是受安全性限制的。比如分布式应用，主网站和二级域名网站的通信等等。

许多人还没意识到当前几乎所有的浏览器（Internet Explorer 8+， Firefox 3.5+， Safari 4+和 Chrome）都可通过名为跨域资源共享（Cross-Origin Resource Sharing）的协议支持ajax跨域调用。 对一个简单的请求，没有自定义头部，要么使用GET，要么使用POST，它的主体是text/plain,请求用一个名叫Orgin的额外的头部发送。Origin头部包含请求页面的头部（协议，域名，端口），这样服务器可以很容易的决定它是否应该提供响应。

在IE8中也是一样，用同样的方式你需要使用XDomainRequest object

 var xdr = new XDomainRequest();

xdr.open("get", "http://www.msnova.net/resource/");
xdr.onload = function(){
//do something
};
xdr.send(); 

 

方法一：跨域资源共享(Cross-Origin Resource Sharing)实现Ajax跨域请求  （跨域资源共享，该规范地址：http://www.w3.org/TR/access-control/和http://dev.w3.org/2006/waf/access-control/）

1.在客服端写下面代码

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
  <title>AJAX跨域请求测试</title>  
</head>  
<body>  
  <input type='button' value='开始测试' onclick='cross_domain_request()' />  
  <div id="content"></div>  
  <script type="text/javascript"> 
    var xhr = new XMLHttpRequest();  
    var url = 'http://www.msnova.net/resource/';  
    function cross_domain_request() {  
      document.getElementByIdx_x("content").innerHTML = "开始……";  
      if (xhr) {  
        xhr.open('GET', url, true);  
        xhr.onreadystatechange = handler;  
        xhr.send();  
      } else {  
        document.getElementByIdx_x("content").innerHTML = "不能创建 XMLHttpRequest";  
      }  
    }  
    function handler(evtXHR) {  
      if (xhr.readyState == 4) {  
        if (xhr.status == 200) {  
          var response = xhr.responseText;  
          document.getElementByIdx_x("content").innerHTML = "结果：" + response;  
        } else {  
          document.getElementByIdx_x("content").innerHTML = "不允许跨域请求。";  
        }  
      }  
      else {  
        document.getElementByIdx_x("content").innerHTML += "<br/>执行状态 readyState：" + xhr.readyState;  
      }  
    }  
</script>  
</body>  
</html>

 

 

 

 

2.在服务端写（可写在前台页面，也可在后台文件中写）

 <%@ Page Language="C#" %>  

<script runat="server"> 
  protected void Page_Load(object sender, EventArgs e)  
  {  
    Response.AddHeader("Access-Control-Allow-Origin", "http://www.yoursite.com:8080");  
    Response.Write("孟宪会向各位朋友发来贺电：你的第一个跨域测试成功啦！！！");  
  }  
</script>

 

 

 注意：在请求信息中，浏览器使用 Origin 这个 HTTP 头来标识该请求来自于 http://www.yoursite.com:8080；在返回的响应信息中，使用 Access-Control-Allow-Origin 头来控制哪些域名的脚本可以访问该资源。如果设置 Access-Control-Allow-Origin:*，则允许所有域名的脚本访问该资源。如果有多个，则只需要使用逗号分隔开即可。

 注意：在服务器端，Access-Control-Allow-Origin 响应头 http://www.yoursite.com:8080 中的端口信息不能省略。

 如果想实现 XMLHttpRequest 来请求任意一个网站的数据，则需设置：

 Response.AddHeader("Access-Control-Allow-Origin", "http://www.yoursite.com:8080");

<!--[if !supportLists]-->l  <!--[endif]-->请求的url是PHP的：echo：header（""Access-Control-Allow-Origin: *""）

<!--[if !supportLists]-->l  <!--[endif]-->请求的html的：<meta http-equiv="Access-Control-Allow-Origin" content="*">

<!--[if !supportLists]-->l  <!--[endif]-->请求的url是JSP的：response.addHeader("Access-Control-Allow-Origin","*");

 

 这行代码就告诉浏览器，只有来自 http://www.yoursite.com:8080 源下的脚本才可以进行访问。

 推荐阅读：http://blog.csdn.net/net_lover/archive/2010/01/11/5172509.aspx

 这样就可以实现跨域请求了，总结一下网上的方法，我绝不错的

方法二：document.domain+iframe

 对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。具体的做法是可以在http://www.msnova.net/a.html和http:// blogs.msnova.net/b.html两个文件中分别加上document.domain = ‘msnova.net’；

然后通过a.html文件中创建一个iframe,去控制iframe的contentDocument,这样两个js文件之间就可以“交互”了。当然这种办法只能解决主域相同而二级域名不同的情况

www.msnova.net上的a.html 

     document.domain = 'msnova.net';

    var ifr = document.createElement_x('iframe');
    ifr.src = 'http://script.msnova.net/b.html';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    ifr.onload = function(){
        var x = ifr.contentDocument;
        alert(x.getElementsByTagName_r("h1")[0].childNodes[0].nodeValue);
    

 script.msnova.net上的b.html

document.domain

 

=

'msnova.net'; 

补充：同源策略：

URL

说明

是否允许通信

http://www.msnova.net/lab/a.html
http://www.msnova.net/script/b.html

同一域名下不同文件夹

允许

http://www.msnova.net/a.html
http://www.msnova.net/b.html

同一域名下

允许

http://www.msnova.net:8000/a.html
http://www.msnova.net/b.html

同一域名，不同端口

不允许

http://www.msnova.net/a.html
https://www.msnova.net/b.html

同一域名，不同协议

不允许

http://www.msnova.net/a.html
http://70.32.92.74/b.html

域名和域名对应ip

不允许

http://www.msnova.net/a.html
http://blogs.msnova.net/b.html

主域相同，子域不同

不允许

http://www.cnblogs.com/a.html
http://www.msnova.net/b.html

不同域名

不允许

 

 

分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Referrer-Policy : strict-origin-when-cross-origin解决方案

    1. **CORS（Cross-Origin Resource Sharing）**：服务器端设置Access-Control-Allow-Origin等响应头，允许特定域名的请求访问。这是推荐的解决跨域问题的标准方法。 2. **JSONP（JSON with Padding）**：通过动态...

    Access-Control-Allow-Origin跨域问题的终极解决，给自己做备份

    2. CORS(Cross-Origin Resource Sharing)：现代浏览器支持的跨域方式，通过设置Access-Control-Allow-Origin等CORS相关的响应头，允许特定或所有源进行跨域请求。CORS支持所有HTTP方法，并提供了完整的错误处理机制...

    cross-request-3.0-master.zip

    1. CORS（Cross-Origin Resource Sharing，跨源资源共享）：这是一种W3C标准，通过在服务器端设置特定的HTTP响应头，允许浏览器在跨域请求时进行权限判断，从而实现跨域资源访问。 2. JSONP（JSON with Padding）：...

    Allow-Control-Allow- Origin.zip

    3. **CORS（Cross-Origin Resource Sharing）**：为了解决跨域限制，Web开发者可以使用CORS机制，通过在服务器端设置"Access-Control-Allow-Origin"响应头，允许特定或所有源的请求。 4. **"Access-Control-Allow-...

    vue+springboot实现项目的CORS跨域请求

    跨域资源共享CORS（Cross-origin Resource Sharing），是W3C的一个标准，允许浏览器向跨源的服务器发起XMLHttpRequest请求，克服ajax请求只能同源使用的限制。关于CORS的详细解读，可参考阮一峰大神的博客：跨域资源...

    Allow-Control-Allow-Origin_1_0_3_0.crx.zip

    在前端开发过程中，跨域（Cross-Origin）是一个常见的问题，特别是在使用Ajax进行API调用或者加载外部资源时。"Allow-Control-Allow-Origin_1_0_3_0.crx" 是一个Chrome浏览器扩展，用于帮助开发者解决跨域限制，以...

    Ajax跨域请求解决方案-JSONP

    因此，在现代Web开发中，更安全和功能强大的CORS（Cross-Origin Resource Sharing）跨域资源共享策略逐渐成为首选。然而，对于兼容老版本浏览器或者简单的跨域需求，JSONP仍然是一种有效的选择。

    Jquery跨域Ajax请求测试

    除了JSONP，还可以通过CORS（Cross-Origin Resource Sharing，跨源资源共享）来实现跨域请求。CORS需要服务端支持，在响应头中添加`Access-Control-Allow-Origin`字段，指定允许哪些源进行跨域请求。在jQuery中，...

    异常 AJAX 跨域请求报：No ‘Access-Control-Allow-Origin‘ header is present

    要解决这个问题，我们需要理解CORS（Cross-Origin Resource Sharing，跨源资源共享）机制。CORS是现代浏览器提供的一种安全机制，允许特定的跨域请求。在服务器端，你需要设置`Access-Control-Allow-Origin`响应头来...

    SpringBoot实现前后端分离的跨域访问（CORS）

    CORS，即Cross-Origin Resource Sharing，跨域资源共享，是一种允许浏览器从不同源加载资源的机制。在前后端分离的架构中，由于前端和后端可能部署在不同的域名下，跨域问题就显得尤为重要。SpringBoot提供了多种...

    Allow-Control-Allow-Origin.rar

    在前端开发中，跨域（Cross-Origin）是一个常见的问题，特别是在进行Ajax请求或者资源加载时。"Allow-Control-Allow-Origin.rar" 提供的解决方案是针对谷歌浏览器（Google Chrome）的一个插件，名为 "Allow-Control-...

    Allow_CORS__Access-Control-Allow-Origin_0_1_1_0.zip

    CORS（Cross-Origin Resource Sharing）是一种W3C标准，它允许浏览器和服务器通过添加特定的HTTP头部来安全地执行跨域请求。默认情况下，由于同源策略的限制，浏览器只允许与同一源（协议+域名+端口）的网站进行交互...

    解决ajax跨域请求问题

    2. CORS(Cross-Origin Resource Sharing)：CORS是现代浏览器支持的一种跨域方式，通过设置HTTP响应头`Access-Control-Allow-Origin`来允许特定的跨域请求。服务器可以在响应头中指定允许的源，如`Access-Control-...

    ajax跨域请求WebService.asmx

    但是，可以通过CORS（Cross-Origin Resource Sharing，跨源资源共享）机制实现跨域。在服务端，需要在响应头中添加`Access-Control-Allow-Origin`字段，指定允许跨域请求的源。 3. **WebService.asmx**：这是ASP...

    html通过 ajax jsonp跨域请求接收和传送数据

    为实现跨域，我们可以使用CORS（Cross-Origin Resource Sharing）机制。服务器需要在响应头中添加`Access-Control-Allow-Origin`字段，允许特定的源进行跨域访问。客户端的AJAX请求设置`xhr.open('GET', url, true)`...

    Allow-CORS_-Access-Control-Allow-Origin_v0.1.2.crx

    CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature. Please note that, when the add-on ...

    ajax跨域调用wcf实例--改分重传

    - CORS（Cross-Origin Resource Sharing）：这是一种现代浏览器支持的机制，允许服务器指定哪些源可以访问其资源。WCF服务端设置`Access-Control-Allow-Origin`头来允许特定的源进行跨域请求。 在提供的...

    Allow-Control-Allow-Origin-小军617

    标题“Allow-Control-Allow-Origin-小军617”和描述中的...对于更复杂的应用场景，可以考虑使用CORS（Cross-Origin Resource Sharing）进行服务器端的跨域配置，或者使用JSONP（JSON with Padding）等其他跨域技术。

Magicbox
Global site tag (gtag.js) - Google Analytics