Question

我试图在Angular中对某个API执行简单的get请求，但我得到以下内容：

XMLHttpRequest无法加载 https://maps.googleapis.com/maps/api/elevation/json?locations=39.7391536,-104.9847034&key=MY_KEY。 No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的上资源。起源＆＃39; https://my-site.herokuapp.com＆＃39;因此不是允许访问。

我尝试过很多不同的API，只是为了测试它是否是我需要在我的目标API上启用的设置，或者它是否只是一般情况下的任何一个API＆＃39; API我尝试访问。我和所有人都犯了这个错误，所以在这一点上它的GOTTA是我做错的事。

另外要注意的是，我正在推送到heroku，以便它在Web服务器上运行，而不是在本地主机上运行。

以下是我的角度代码：

$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;
                });

我已经打开了大约一千个浏览器标签来搜索关于此的信息，很多人说＆＃34;你不会。您发出请求的服务器必须实施CORS才能从您的网站访问中授予JavaScript。＆＃34;或类似的东西。但我正在尝试使用Google，显然他们应该允许跨网站请求，因此它必须是我做错的事情。谢谢你的帮助。

Answer 1

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

Angular http.get API请求 - No＆＃39; Access-Control-Allow-Origin＆＃39;标头存在

1 个答案: