javascript - XMLHttpRequest.send() 导致 Access-Control-Allow-Origin 错误

Question

这个问题已经有答案了:

Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not? (14 个回答)

已关闭 6 年前。

我正在尝试使用以下 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 cannot load https://api.something.com/apikeyetcetc. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8888' is therefore not allowed access.

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

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

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

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

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

Answer 1

您遇到的问题不是由于本地服务器上的设置造成的，因此添加 .htaccess 文件不会有帮助。

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

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

或者，在开发过程中，您可以安装浏览器扩展程序来防止浏览器阻止请求。我知道 Chrome 有一些，我想 Firefox 至少也会有一个。 (只要记住在不使用它时将其禁用，因为它可能会导致其他网站出现问题)。