AJAX 请求出现 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误

Question

我尝试在 jQuery AJAX 请求中发送 GET 请求。

$.ajax({
    type: 'GET',
    url: /* <the link as string> */,
    dataType: 'text/html',
    success: function() { alert("Success"); },
    error: function() { alert("Error"); },
});

然而，无论我尝试过什么，我都得到了 XMLHttpRequest cannot load <page>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7776' is therefore not allowed access.

我尝试了所有方法，从向 AJAX 请求添加 header : {} 定义，到将 dataType 设置为 JSONP，甚至 text/plain，使用简单的 AJAX 而不是 jQuery，甚至下载启用 CORS 的插件 - 但没有任何帮助。

如果我尝试访问任何其他站点，也会发生同样的情况。

有任何合适且简单的解决方案的想法吗？有没有？

Answer 1

你可以问问那个域名的开发者他们是否会为你设置合适的header，这个限制只针对javascript，基本上你可以用[=从你的服务器请求资源12=] 或其他什么，然后 javascript 从您的域请求数据

Answer 2

这是设计使然。您不能使用 XMLHttpRequest 向另一台服务器发出任意 HTTP 请求，除非该服务器通过为请求主机发出 Access-Control-Allow-Origin header 来允许它。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

您可以在脚本标记中检索它（对脚本、图像和样式表没有相同的限制），但除非返回的内容是脚本，否则它对您没有多大用处。

这里有一个关于 CORS 的教程：

http://www.bennadel.com/blog/2327-cross-origin-resource-sharing-cors-ajax-requests-between-jquery-and-node-js.htm

这一切都是为了保护最终用户。假设图像实际上是图像，样式表只是样式表，脚本只是脚本，从另一台服务器请求这些资源不会造成任何伤害。

但总的来说，cross-origin 请求可以做非常糟糕的事情。假设你，Zoltan，正在使用 coolsharks.com。还说您已登录 mybank.com，并且在您的浏览器中有一个 mybank.com 的 cookie。现在，假设 coolsharks.com 向 mybank.com 发送了一个 AJAX 请求，要求将您所有的钱转入另一个帐户。因为您存储了 mybank.com cookie，所以他们成功完成了请求。所有这一切都是在您不知情的情况下发生的，因为没有发生页面重新加载。这是允许一般 cross-site AJAX 请求的危险。

如果您想执行 cross-site 个请求，您有两个选择：

获取您向其发出请求的服务器
一种。通过发布包含您（或 *）
的 Access-Control-Allow-Origin header 来录取您 b.给你一个JSONP API.

或

自己写浏览器，不遵循标准，没有限制。

在 (1) 中，您必须与您向其发出请求的服务器合作，在 (2) 中，您必须控制最终用户的浏览器。如果你不能满足（1）或（2），那你就很倒霉了。

不过，还有第三种选择（charlietfl 指出）。您可以从您控制的服务器发出请求，然后将结果传回您的页面。例如

<script>
$.ajax({
    type: 'GET',
    url: '/proxyAjax.php?url=http%3A%2F%2Fwhosebug.com%2F10m',
    dataType: 'text/html',
    success: function() { alert("Success"); },
    error: function() { alert("Error"); }
});
</script>

然后在您的服务器上，最简单的是：

<?php
// proxyAjax.php
// ... validation of params
// and checking of url against whitelist would happen here ...
// assume that $url now contains "http://whosebug.com/10m"
echo file_get_contents($url);

当然，这个方法可能运行变成其他问题：

您代理的站点是否需要正确的引荐来源网址或特定 IP 地址？
是否需要将 cookie 传递到目标服务器？
您的白名单是否足以保护您免受任意请求的侵害？
当您的服务器收到它们时，您将向浏览器传回哪些 headers（例如修改时间等），您将忽略或更改哪些？
您的服务器是否会因提出了非法请求而受到牵连（因为您是代理人）？

我确定还有其他人。但是，如果 none 这些问题阻止了它，那么第三种方法可能会很有效。

Answer 3

老问题，但我在任何地方都没有看到这个对我有用的解决方案。所以希望这对某人有帮助。

首先，请记住尝试修改请求的 headers 来绕过 cross-origin 资源请求是没有意义的。如果仅此而已，恶意用户就很容易绕过此安全措施。

Cross-origin 只有在合作伙伴站点的服务器通过其 response headers.

允许的情况下，此上下文中的请求才有可能

通过在响应中设置以下 headers，我在没有任何 CORS 中间件的情况下在 Django 中工作：

    response["Access-Control-Allow-Origin"] = "requesting_site.com"
    response["Access-Control-Allow-Methods"] = "GET"
    response["Access-Control-Allow-Headers"] = "requesting_site.com"

这里的大多数答案似乎都提到了第一个，但没有提到后两个。我刚刚确认它们都是必需的。您需要根据需要修改您的框架或请求方法（GET、POST、OPTION）。

p.s。您可以尝试 "*" 而不是 "requesting_site.com" 进行初始开发，只是为了让它正常工作，但允许每个站点访问将是一个安全漏洞。工作后，您可以将其限制在您请求的网站上，以确保您没有任何格式拼写错误。

AJAX 请求出现 "No 'Access-Control-Allow-Origin' header is present on the requested resource" 错误

AJAX request gets "No 'Access-Control-Allow-Origin' header is present on the requested resource" error

javascript

ajax

jquery

xmlhttprequest

cors