否'访问控制允许来源'标头存在于请求的资源上.原点''因此不允许访问

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '...' is therefore not allowed access

本文关键字：资源 请求 访问 不允许 原点 于请求 访问控制 存在      更新时间：2024-04-05

我使用.htaccess重写url，并使用html基标记使其工作。

现在，当我尝试发出ajax请求时，我会收到以下错误：

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

使用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。

出现错误的原因：

JavaScript代码受同源策略的限制，也就是说，从www.example.com的页面，您只能向位于的服务发出（AJAX）请求，在这种情况下，请求的域正好是www.example.com（而不是example.com-没有www-或whatever.example.com）。

在您的案例中，Ajax代码试图从位于http://www.wordicious.com的页面访问http://wordicious.com中的服务。

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

由于您在http://wordicious.com的页面/服务从未配置为显示这样的标题，因此会显示该错误消息。

解决方案：

如上所述，源域（包含JavaScript的页面所在的位置）和目标域（JavaScript试图到达的位置）必须完全相同。

你的案子好像是个打字错误。看起来http://wordicious.com和http://www.wordicious.com实际上是同一个服务器/域。因此，要修复此问题，请平均键入目标和源：使Ajax代码请求页面/服务指向http://www.wordicious.com，而不是http://wordicious.com。（可能将目标URL相对放置，如'/login.php'，不包含域）。



更一般地说：

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

For.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>

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

请求的资源上不存在"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酒店搜索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头响应。

访问控制允许凭据：真正的

访问控制允许来源：*

但当涉及到安全时，这不是一个好的解决方案

将其添加到PHP文件或主控制器

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

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

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

或者Apache反向代理。。。

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}]]

Pleaes在Javascript中查找XMLHTTPREQUEST中用于设置请求标头的函数。

...
xmlHttp.setRequestHeader("Access-Control-Allow-Origin", "http://www.example.com");
...
</script>

参考：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/setRequestHeader

相关文章：