请求的资源上没有“访问-控制-允许-起源”标头。因此不允许访问起源“ ...”

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

现在，当我尝试执行 ajax 请求时，会得到以下错误:

XMLHttpRequest 无法加载 http://www.example.com/login.php。请求的资源上没有“ Access-Control-allow-Origin”头。因此不允许访问 Origin“ http://example.com”。

552714 次浏览
小开

出现错误的原因:

JavaScript 代码受到 同一原产地政策的限制，也就是说，从 www.example.com的一个页面，你只能对位于 没错的相同域的服务发出(AJAX)请求，在这种情况下，正好是 www.example.com(没有 example.com-没有 www-或 whatever.example.com)。

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

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

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

解决方案:

如前所述，原始域(包含 JavaScript 的页面所在的位置)和目标域(JavaScript 试图到达的位置)必须是相同的 一模一样。

你的案子看起来像是打印错误。看起来 http://wordicious.com和 http://www.wordicious.com实际上是同一个服务器/域。所以要修复，输入目标和原点相等: 让你 Ajax 代码请求页面/服务到 ABC1而不是 http://wordicious.com。(可以相对地放置目标 URL，比如 '/login.php'，不要放置域名)。



更笼统地说:

如果问题不是像这个问题似乎是一个打字错误，解决方案将是 将 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");
}






}
小开

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

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

或者阿帕奇反向代理。

小开

对于.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>
小开

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

小开

您需要在 php 页面“ login.php”的开始部分添加这个命令

<?php header('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));

您正在执行相同的查询，但是在服务器端，在此之后，它应该可以正常工作。

小开

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

访问-控制-允许-凭据: true

访问-控制-允许-来源: *

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

小开

添加到您的 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}]]
小开

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

...


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

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


提交答案