向 google api 发送请求时的 Access-Control-Allow-Origin

Question

我试图在我的 angularjs 应用程序中向谷歌 API 发送一个请求，以获取某个位置周围半径内的景点。但我在 chrome 中收到此错误消息： 请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:9000' 因此不允许访问。

json 和 jsonp 我都试过了，但结果是一样的。 :S

    $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> 不允许您的来源访问响应。因此，您无法阅读它。

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