请使用firefox,chrome等最新浏览器浏览本站。

AJAX POST跨域 解决方案 – CORS

html5 阿豹 1780次浏览 7个评论 扫描二维码

跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源。而这种访问是被同源策略所禁止的。CORS系统定义了一种浏览器和服务器交互的方式来确定是否允许跨域请求。 它是一个妥协,有更大的灵活性,但比起简单地允许所有这些的要求来说更加安全。
简言之,CORS就是为了让AJAX可以实现可控的跨域访问而生的。

JSONP与CORS对比

以前要实现跨域访问,可以通过JSONP、Flash等。
1.JSONP只能实现GET请求,数据传输量小。而CORS支持所有类型的HTTP请求。
2.使用CORS,开发者可以使用普通的XMLHttpRequest发起请求和获得数据,比起JSONP有更好的错误处理。jsonp是基于script请求。
3. JSONP主要被老的浏览器支持,它们往往不支持CORS,而绝大多数现代浏览器都已经支持了CORS
查看浏览器支持CORS

CORS使用

以前我们使用Ajax,代码类似于如下的方式:

var xhr = new XMLHttpRequest();  
xhr.open("GET", "/api", true);  
xhr.send(); 

这里的“/api”是本域的相对路径。
如果我们要使用CORS,相关Ajax代码可能如下所示:

var xhr = new XMLHttpRequest();  
xhr.open("GET", "http://ww.bao.net/api", true);  
xhr.send(); 

代码与之前的区别就在于相对路径换成了其他域的绝对路径,也就是你要跨域访问的接口地址

我们还必须提供浏览器回退功能检测和支持,避免浏览器不支持的情况。

function createCORSRequest(method, url) {  
  var xhr = new XMLHttpRequest();  
  if ("withCredentials" in xhr) {  
    // 此时即支持CORS的情况  
    // 检查XMLHttpRequest对象是否有“withCredentials”属性  
    // “withCredentials”仅存在于XMLHTTPRequest2对象里  
    xhr.open(method, url, true);  
   
  } else if (typeof!= "undefined") {  
   
    // 否则检查是否支持XDomainRequest,IE8和IE9支持  
    // XDomainRequest仅存在于IE中,是IE用于支持CORS请求的方式  
    xhr = new XDomainRequest();  
    xhr.open(method, url);  
   
  } else {  
   
    // 否则,浏览器不支持CORS  
    xhr = null;  
   
  }  
  return xhr;  
}  
   
var xhr = createCORSRequest('GET', url);  
if (!xhr) {  
  throw new Error('CORS not supported');  
}  

apache服务器配置:
Apache需要使用mod_headers模块来激活HTTP头的设置,它默认是激活的。你只需要在Apache配置文件的, , 的配置里加入以下内容即可:

php代码设置:

header("Access-Control-Allow-Origin:*"); 

以上的配置的含义是允许任何域发起的请求都可以获取当前服务器的数据。当然,这样有很大的危险性,恶意站点可能通过XSS攻击我们的服务器。所以我们应该尽量有针对性的对限制安全的来源,例如下面的设置使得只有http://blog.csdn.net这个域才能跨域访问服务器的API。

header("Access-Control-Allow-Origin: http://www.bao.com"); 

喜欢 (10)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到
(7)个小伙伴在吐槽
  1. 666666
    匿名2015-12-24 23:28 回复
  2. 提前祝您新年快乐。 乙未年(羊)冬月廿十 2015-12-30
    yiluyingxiao2015-12-30 13:18 回复
  3. Happy New Year.
    wo2016-01-01 10:04 回复
  4. 看看!
    117087542016-01-04 10:49 回复
  5. 看看!
    88330292016-01-04 19:05 回复