向谷歌 API 发送请求时的访问控制允许来源

Question

我试图在我的angularjs应用程序中向Google API发送请求，以获取某个位置周围半径内的景点。但是我在chrome中收到此错误消息：请求的资源上不存在"访问控制允许源"标头。因此，不允许访问源"http://localhost:9000"。

我已经尝试了json和jsonp，但结果是一样的。

    $http.get('https://maps.googleapis.com/maps/api/place/radarsearch/json?location=51.503186,-0.126446&radius=5000&type=museum&key=<MYKEY>')
        .then(function(response) {
            $scope.dataResult = response.data;
        });
    $scope.getlocation = function() {
        $scope.method = 'GET';
        $http({ method: $scope.method, url: "https://maps.googleapis.com/maps/api/place/radarsearch/json?location=51.503186,-0.126446&radius=5000&type=museum&key=<MYKEY>&callback=JSON_CALLBACK" }).
        success(function(data, status) {
            $scope.status = status;
            $scope.data = data;
            console.log(data);
        }).
        error(function(data, status) {
            $scope.data = data || "Request failed";
            $scope.status = status;
        });
    };

我

不想在地图上显示结果，我只想以列表格式显示结果。

Answer 1

这是 CORS 问题，从客户端您可以启用这样的 cors 请求。

angular.module('yourapp').config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        delete $httpProvider.defaults.headers.common['X-Requested-With'];
    }
]);

您的案例的问题是，https://maps.googleapis.com/maps/api/place/radarsearch/json?location=51.503186,-0.126446&radius=5000&type=museum&key=<MYKEY>不允许源访问响应。因此，您无法阅读它。

我希望您有一个有效的密钥，并且在注册时，您已在域的位置列出了您的本地主机......因为谷歌需要知道这些。