2016-02-26 96 views
0

我一直在用JavaScript构建天气小部件。为什么跨站API调用允许一些API但不允许其他人

我使用angularjs($ http method: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允许?

回答

0

这是因为第二个API使用HTTPS?

不,这是因为第一个API包含一个'Access-Control-Allow-Origin'标头来给予您许可。

为什么第一个API允许?

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

+1

所以是它在API提供商的设置结束? – Menol

+1

@Menol - 好的。是。明显。正如我所说 - *第一个API包含一个'Access-Control-Allow-Origin'标头* - 如果那是我所说的来源,它几乎不可能从其他地方来。 – Quentin

+0

@Quentin easy language plz。很难得到评论。 – Jai

0

感谢@ Quentin提到的Access-Control-Allow-Origin头文件,我在下面介绍的是一个API被阻塞而另一个被允许的原因。

我的第一个(成功)API将派遣页眉下方,其响应:

Access-Control-Allow-Origin:* 

而第二(失败)为什么浏览器拒绝显示的响应API并没有发送这个头,这是我的域。

关于访问控制允许来源头部

网络资源,如API的说明它们的回应,以避免或跨站点的方式其他领域限制使用其资源一起发送这个头。

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

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

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

如果你想了解更多,那么这个头转到下HTTP访问控制(CORS)这充分说明here.

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