请求的资源上没有“Access-Control-Allow-Origin”标题。 原因'…'因此不被允许访问

我正在使用.htaccess重写url,并使用了html基本标签来使其工作。

现在,当我尝试做一个Ajax请求时,我得到以下错误:

XMLHttpRequest无法加载http://www.wordicious.com/login.php 。 请求的资源上没有“Access-Control-Allow-Origin”标题。 原因' http://wordsicious.com '因此不允许访问。

使用addHeader而不是使用setHeader方法,

 response.addHeader("Access-Control-Allow-Origin", "*"); 

*在上面的行将允许access to all domains


access to specific domain only允许access to specific domain only

 response.addHeader("Access-Control-Allow-Origin", "http://www.example.com"); 

检查这个blog post

为什么会出现错误:

JavaScript代码受同源策略的限制 ,也就是说,从www.example.com一个页面,您只能向位于完全相同的域的服务发出(AJAX)请求,在这种情况下, www.example.com不是 example.com – 没有www – 或whatever.example.com )。

在你的情况下,你的Ajax代码试图通过位于http://wordicious.com的页面来访问http://www.wordicious.com

虽然非常相似,但它们并不相同。 而当它们不在同一个域中时,只有当目标的respose包含一个Access-Control-Allow-Origin标头时,该请求才会成功。

由于您在http://wordicious.com页面/服务从未configuration为显示此类标题,因此会显示该错误消息。

解:

如上所述,源代码(带有JavaScript的页面位于)和目标(JavaScript尝试访问的区域)的域必须完全相同

你的情况好像是一个错字。 看起来像http://wordicious.comhttp://www.wordicious.com实际上是相同的服务器/域。 所以要修正,同样input目标和来源: 让你的Ajax代码请求页面/服务http://www.wordicious.com不是http://wordicious.com 。 (也许放置目标url,比如'/login.php' ,没有域名)。

在更一般的说明:

如果问题不是像这个问题似乎是一个错字,解决方法是Access-Control-Allow-Origin到目标域 。 要添加它,当然取决于该地址后面的服务器/语言。 有时工具中的一个configurationvariables会起作用。 其他时候,你必须通过代码自己添加标题。

对于.NET服务器,可以在web.config中configuration,如下所示

  <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="your_clientside_websiteurl" /> </customHeaders> </httpProtocol> </system.webServer> 

比如说,如果服务器域是http://live.makemypublication.com ,客户端是http://www.makemypublication.com,那么在服务器的web.config中configuration如下;

  <system.webServer> <httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" /> </customHeaders> </httpProtocol> </system.webServer> 

如果您从浏览器中收到此错误消息:

请求的资源上没有“Access-Control-Allow-Origin”标题。 原因'…'因此不被允许访问

当您尝试对远离您的控制的远程服务器执行Ajax POST / GET请求时,请忘记这个简单的修复:

 <?php header('Access-Control-Allow-Origin: *'); ?> 

您真正需要做的事情,特别是如果您只使用JavaScript来执行Ajax请求,则是一个内部代理,它将您的查询发送到远程服务器。

首先在您的JavaScript中,对您自己的服务器执行一个Ajax调用,如下所示:

 $.ajax({ url: yourserver.com/controller/proxy.php, async:false, type: "POST", dataType: "json", data: data, success: function (result) { JSON.parse(result); }, error: function (xhr, ajaxOptions, thrownError) { console.log(xhr); } }); 

然后,创build一个名为proxy.php的简单PHP文件来包装您的POST数据,并将它们作为参数附加到远程URL服务器。 我给你一个我如何绕过Expedia Hotel search API的问题的例子:

 if (isset($_POST)) { $apiKey = $_POST['apiKey']; $cid = $_POST['cid']; $minorRev = 99; $url = 'http://api.ean.com/ean-services/rs/hotel/v3/list?' . 'cid='. $cid . '&' . 'minorRev=' . $minorRev . '&' . 'apiKey=' . $apiKey; echo json_encode(file_get_contents($url)); } 

通过做:

  echo json_encode(file_get_contents($url)); 

你只是做相同的查询,但在服务器端,之后,它应该工作正常。

你需要添加这个在你的PHP页面“login.php”开始

 <?php header('Access-Control-Allow-Origin: *'); ?> 

您必须将选项方法响应中的标题键/值。 例如,如果您在http://mydomain.com/myresource有资源,那么在您的服务器代码中编写;

 //response handler void handleRequest(Request request, Response response) { if(request.method == "OPTIONS") { response.setHeader("Access-Control-Allow-Origin","http://clientDomain.com") response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS"); response.setHeader("Access-Control-Allow-Headers", "Content-Type"); } } 

基本上通过添加以下附加参数来更改API标头响应。

Access-Control-Allow-Credentials:true

Access-Control-Allow-Origin:*

但是当涉及到安全性时,这不是一个好的解决scheme

解决方法是使用在“源”主机上运行的反向代理并转发到目标服务器,如Fiddler:

链接: http : //docs.telerik.com/fiddler/configure-fiddler/tasks/usefiddlerasreverseproxy

或者一个Apache反向代理…

添加这个给你的PHP文件或主控制器

 header("Access-Control-Allow-Origin: http://localhost:9000"); 

在httpd.conf中用下面的条目解决

 #CORS Issue Header set X-Content-Type-Options "nosniff" Header always set Access-Control-Max-Age 1728000 Header always set Access-Control-Allow-Origin: "*" Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT,PATCH" Header always set Access-Control-Allow-Headers: "DNT,X-CustomHeader,Keep-Alive,Content-Type,Origin,Authentication,Authorization,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control" Header always set Access-Control-Allow-Credentials true #CORS REWRITE RewriteEngine On RewriteCond %{REQUEST_METHOD} OPTIONS #RewriteRule ^(.*)$ $1 [R=200,L] RewriteRule ^(.*)$ $1 [R=200,L,E=HTTP_ORIGIN:%{HTTP:ORIGIN}]] 

当我使用AngularDjango REST后端发布logging时,我遇到了这个问题。 有时候,这个问题没有特别的理由。 仔细检查你的Django的错误信息,你会发现一个解决scheme。