请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点'...'访问

Question

我正在使用.htaccess重写网址,我使用了html基本标记以使其正常工作.

现在,当我尝试发出ajax请求时,我收到以下错误:

XMLHttpRequest无法加载http://www.wordicious.com/login.php.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许来源" http://wordicious.com "访问.

Answer 1

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

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

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

允许access to specific domain only:

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

检查一下blog post.

Answer 2

为什么会出现错误:

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从未配置为显示此标头,因此会显示该错误消息.

解:

如上所述,原点(带有JavaScript的页面所在的位置)和目标(JavaScript试图访问的域)必须完全相同.

你的案子似乎是一个错字.看起来http://wordicious.com和http://www.wordicious.com实际上是相同的服务器/域.因此,要修复,请平均键入目标和原点:不要使Ajax代码请求页面/服务http://www.wordicious.comhttp://wordicious.com.(也许相对地放置目标URL,比如'/login.php'没有域名).

更一般地说:

如果问题不是像这个问题那样的拼写错误,那么解决方案就是将目标域添加Access-Control-Allow-Origin到目标域.当然,添加它取决于该地址背后的服务器/语言.有时,工具中的配置变量可以解决问题.其他时候你必须自己通过代码添加标题.

Answer 3

对于.NET服务器,可以在web.config中进行配置,如下所示

 <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中配置如下

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

Answer 4

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

请求的资源上不存在"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);
    }
});

然后,创建一个名为proxy.php的简单PHP文件来包装POST数据,并将它们作为参数附加到远程URL服务器.我举例说明了如何使用Expedia Hotel搜索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));

你只是在同一个查询,但在服务器端,之后,它应该工作正常.

Answer 5

你需要在你的php页面"login.php"的开头添加它

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

Answer 6

你必须在选项方法响应中放置标题键/值.例如,如果您在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");
    }



}