Question

我一直在使用JavaScript构建天气小部件。

我使用angularjs（$ http method：get）来进行api调用。

使用以下API调用获取天气信息没问题（我的api密钥已删除）

但是当我想切换到另一个API（下面的URL）时，我收到了错误

XMLHttpRequest无法加载https://api.forecast.io/forecast/33.499318,-2.234089000000026?units=si。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许原点“http://localhost:50301”访问。

这是因为第二个API使用HTTPS吗？但它没有意义。为什么第一个api被允许？

Answer 1

这是因为第二个API使用HTTPS吗？

不，这是因为第一个API包含了一个'Access-Control-Allow-Origin'标题，可以授予您权限。

为什么第一个api被允许？

因为第一个API的供应商明确地将其提供给托管在其他网站上的客户端JavaScript。

Answer 2

感谢@ Quentin提到的Access-Control-Allow-Origin标题，我在下面描述的是为什么一个api被阻止而另一个被允许的原因。

我的第一个（成功的）API在其标题下面发送了响应：

Access-Control-Allow-Origin:*

第二个（失败的）API没有发送此标头，这就是浏览器拒绝在我的域上显示响应的原因。

关于Access-Control-Allow-Origin标题

API等Web资源会发送此标头及其响应，以避免或限制其他域以跨站点方式使用其资源。

e.g。如果域A.bc将以下标题添加到其资源

Access-Control-Allow-Origin: http://foo.example

然后只有foo.example可以跨站点方式访问资源。

如果您想要阅读更多信息，那么此标题会在 HTTP访问控制（CORS） 下进行完整解释here.