Question

我正在使用以下代码从google API获取位置详细信息。

我的代码：

 if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){
      $scope.$apply(function(){
        $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng='+position.coords.latitude+','+position.coords.longitude+'&sensor=true').then(function(res){
          alert(res.data);
        });


      });
    });
  }

当我尝试使用此代码时，我收到了跨域错误。

我的错误：

XMLHttpRequest cannot load http://maps.googleapis.com/maps/api/geocode/json?latlng=8.5663029,76.8916023&sensor=true. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.

请建议解决此问题

Answer 1

您正在发送授权标头...这会导致进行CORS预检检查，而google不喜欢授权标头

您需要从API调用中删除此标头

看看这是否有帮助

$http.get("your long url", {headers: {Authorization: undefined}})

显然我已经取代了实际的网址以便于阅读

我也看到了以下建议

$http( {
     method: 'GET',
     url: 'someurl',
     headers: {
       'Authorization': undefined
     }
   }
 )

所以，不要使用$ http.get＆＃34;快捷键＆＃34;，而是使用$ http＆＃34; general＆＃34;请求格式

Answer 2

我有同样的问题;我正在使用卫星模块进行身份验证。 https://github.com/sahat/satellizer

正如常见问题部分所述：＆＃34;如何避免在所有HTTP请求上发送授权标头？＆＃34;

我做了：

$http({
  method: 'GET',
  url: 'your google api URL',
  skipAuthorization: true  // `Authorization: Bearer <token>` will not be sent on this request.
});

它解决了我的问题;也许你正在使用修改标题的第三方模块。

Answer 3

我无法回答我想要的回应威胁，但

也许您的AngularJS应用程序中使用了拦截器，因此在您配置以下内容后，您的请求会被修改：

{headers: { Authorization: null } }

我正在做更多的研究来克服这个问题。我稍后会发布我的发现。

[编辑] 2016年7月13日星期三21:38:03 GMT-0500（CDT）[/编辑]

我对此的解决方案是使用直接的Javascript，这样我的请愿书就不会被$ http服务中的拦截器截获，也没有授权标题。

所以，也许这有助于某人。

干杯！

Google API中的跨域问题使用angularJs

3 个答案: