javascript - Angular http.get API 请求 - 不存在 'Access-Control-Allow-Origin' header

Question

我尝试在 Angular 中向某个 API 发出简单的 get 请求，但得到以下结果:

XMLHttpRequest cannot load https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=MY_KEY. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://my-site.herokuapp.com' is therefore not allowed access.

我尝试了许多不同的 API，只是为了测试它是否是需要在我的目标 API 上启用的设置，或者它是否只是我尝试访问的任何 ol' API 的一般设置。我所有的人都遇到了这个错误，所以现在这肯定是我做错了。

还要注意的是，我正在推送到 heroku，因此它是在 Web 服务器上启动并运行的，而不是在本地主机上。

下面是我的 Angular 代码:

$http.get("https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=MY_KEY")
                .then(function(response) {
                    vm.output = response.data;
                });

我打开了大约一千个浏览器选项卡来搜索相关信息，许多人说“你没有。你发出请求的服务器必须实现 CORS 才能从你的网站授予 JavaScript 访问权限。”或类似的东西。但我正在尝试使用 Google，显然他们应该允许跨站点请求，所以这肯定是我做错了。谢谢你的帮助。

Answer 1

您遇到的问题很常见。您遇到了同源策略。为了更好地理解您面临的问题，请通读其中一些信息，但在较高级别上，您无法从 JavaScript 中的不同域调用另一个域。有一些解决方法，例如 JSONP 和 CORS，但我建议将 API 调用移至服务器端代码，这样您就不会遇到这种情况。

• https://en.wikipedia.org/wiki/Same-origin_policy
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
• Can anyone explain what JSONP is, in layman terms?