Question

我正在尝试使用以下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。

Answer 1

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

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

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

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

XMLHttpRequest.send（）导致Access-Control-Allow-Origin错误

1 个答案: