为什么某些 API 允许跨站点 API 调用，而其他 API 不允许答案

【问题标题】：Why cross site API calls are allowed for some APIs but not others为什么某些 API 允许跨站点 API 调用，而其他 API 不允许
【发布时间】：2016-06-09 14:42:51
【问题描述】：

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

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

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

http://api.openweathermap.org/data/2.5/weather?q=Manchester,uk&appid=xxxxxxxx&units=metric

但是当我想切换到不同的 API（下面的 URL）时，我得到了错误

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

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

【问题讨论】：

标签： javascript api

【解决方案1】：

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

不，这是因为第一个 API 包含一个“Access-Control-Allow-Origin”标头来授予您权限。

为什么第一个 api 被允许？

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

【讨论】：

那么是API提供者端的设置吗？
@Menol — 好吧。是的。明显地。正如我所说——第一个 API 包含一个“Access-Control-Allow-Origin”标头——如果我说它来自其他任何地方，它几乎不可能来自其他任何地方。
@Quentin 易语言请。很难得到评论。
“是”还不够简单吗？
您如何建议攻击者让服务器（他们无法控制）告诉浏览器（他们无法控制）攻击者的 JavaScript 读取数据是安全的网站正在给浏览器？

【解决方案2】：

感谢@Quentin 提到我在下面发现的 Access-Control-Allow-Origin 标头，这是一个 api 被阻止而另一个被允许的原因。

我的第一个（成功的）API 发送下面的标头及其响应：

Access-Control-Allow-Origin:*

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

关于 Access-Control-Allow-Origin 标头

诸如 API 之类的 Web 资源会连同其响应一起发送此标头，以避免或限制其他域以跨站点方式使用其资源。

例如如果域 A.bc 将以下标头添加到其资源中

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

那么只有 foo.example 可以跨站访问资源。

如果您想了解更多信息，则此标头位于 HTTP 访问控制 (CORS) 下，详细说明 here.

这个 SOF 答案也有很好的解释：How does Access-Control-Allow-Origin header work?

【讨论】：