解决 js ajax跨域访问报“No 'Access-Control-Allow-Origin' header is present on the requested resource.”错误

三郎 2018-2-11 867

前两天做后台更新检测模块,用ajax跨域访问请求时报错

XMLHttpRequest  cannot  loadhttp://www.zjblogs.com/.  No  'Access-Control-Allow-Origin'  header  is  present  on  the  requested  resource.  Origin  'null'  is  therefore  not  allowed  access.

查了一翻资料,发现原来是新W3C标准中是这样规定的:

最新的W3C标准里是这么实现HTTP跨域请求的,  Cross-Origin  Resource  Sharing

简单的来说,就是跨域的目标服务器要返回一系列的Headers,通过这些Headers来控制是否同意跨域。这些Headers有:

4  Syntax

4.1  Access-Control-Allow-Origin  HTTP  Response  Header

4.2  Access-Control-Max-Age  HTTP  Response  Header

4.3  Access-Control-Allow-Credentials  HTTP  Response  Header

4.4  Access-Control-Allow-Methods  HTTP  Response  Header

4.5  Access-Control-Allow-Headers  HTTP  Response  Header

4.6  Origin  HTTP  Request  Header

4.7  Access-Control-Request-Method  HTTP  Request  Header

4.8  Access-Control-Request-Headers  HTTP  Request  Header

在  Request  包和  Response  包中都有一些。

其中最敏感的就是  Access-Control-Allow-Origin  这个  Header,  他是W3C标准里用来检查该跨域请求是否可以被通过。  (Access  Control  Check)

跨域实现的过程大致如下:

从  http://www.a.com/test.html  发起一个跨域请求,

请求的地址为:  http://www.b.com/test.PHP

如果  服务器B返回一个如下的header

Access-Control-Allow-Origin:  http://www.a.com

那么,这个来自  http://www.a.com/test.html  的跨域请求就会被通过。

如上所知,总结解决办法如下:

1、如果请求的url是aspx页面,则需要在aspx页面中添加代码:

Response.AddHeader("Access-Control-Allow-Origin",  "*");

2、如果请求的url是PHP页面,则需要在PHP页面中添加代码:

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

3、如果请求的url是静态的html页面,则需要在页面中添加meta标签代码:

<meta  http-equiv="Access-Control-Allow-Origin"  content="*"  />


如果服务器端可以确定是要被哪些域名访问,最好是能把以上代码中的“*”代替为具体的域名,这样做可以相应的增强安全性。

最新回复 (2)
  • 0 引用 2
    目前程序的后台更新检查就是这个吧?
    2018-2-12 回复
  • 0 引用 3
    现在的更新检查是通过手机域名检查的,所以不会影响后台的访问
    2018-2-13 回复
返回
发新帖