XMLHttpRequest.send() 导致 Access-Control-Allow-Origin 错误 [重复]答案

【问题标题】：XMLHttpRequest.send() causes Access-Control-Allow-Origin error [duplicate]XMLHttpRequest.send() 导致 Access-Control-Allow-Origin 错误 [重复]
【发布时间】：2016-10-15 03:43:52
【问题描述】：

我正在尝试使用以下 JS 对第三方服务进行 API 调用：

<script>
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.something.com/apikeyetcetc", false);
xhr.send();

console.log(xhr.status);
</script>

但是，在 xhr.send() 行，它会在浏览器的控制台中触发此错误：

XMLHttpRequest 无法加载 https://api.something.com/apikeyetcetc。不请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“http://localhost:8888” 访问。

我正在使用来自 www.mamp.info 的 MAMP 在全新安装的 macOS Sierra 上运行本地服务器。

我在与我创建的 HTML 文件相同的目录中创建了一个 .htaccess 文件，并添加了以下行：

Header set Access-Control-Allow-Origin "*"

但这似乎没有帮助。我看到很多关于 Apache 和其他配置上的 CORS 的不同建议，但我想确保在随机尝试之前知道这里发生了什么（尤其是当我仍然有一个干净的开发环境时）。有什么想法可能会发生什么？

编辑：我尝试使用的 API 是 Dark Sky。

【问题讨论】：

这里有一些解决方案~stackoverflow.com/questions/15005500/…
在你的服务器上使用 cURL 来代理请求
@Phil 等等，为什么这被标记为重复？它涉及类似的领域，但您的线程中的问题是提出不同的问题，并且实际上并没有一个单一的解决方案，而不是关于同源策略和 CORS 的一般链接？
答案在于 Dark Sky（正如他的编辑中提到的）完全禁用了 CORS，并建议您使用自己的代理服务器以防止人们窃取您的 API 密钥：darksky.net/dev/docs/faq#cross-origin

标签： javascript apache .htaccess api

【解决方案1】：

您遇到的问题不是因为本地服务器上的设置，因此添加 .htaccess 文件无济于事。

问题是因为托管 API 的服务器的响应没有 Access-Control-Allow-Origin 标头。请问您尝试使用的 API 是什么？

如果 API 超出您的控制范围，您有几个选择，您可以使用 NodeJS 设置 CORS 代理。其中有一些，例如https://www.npmjs.com/package/corsproxy

或者，在您进行开发时，您可以安装一个浏览器扩展程序，以防止浏览器阻止请求。我知道 Chrome 有几个，我想 Firefox 至少会有一个。（请记住在不使用时禁用它，因为它可能会导致其他网站出现问题）。

【讨论】：

当然，我尝试使用的 API 是 Dark Sky 的。 darksky.net/dev/docs