$http 跨域请求被 Angular JS 阻止

Question

我正在尝试使用我们的建议 API“https://SuggestionsAPI.net/suggest?key=xyz”之一实现搜索建议，该 API 与 Ajax GET 请求配合良好，但是当我尝试将它与 Angular $http 服务一起使用时，它向我抛出错误是控制台：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote 
resource at https://SuggestionsAPI.net/suggest?key=xyz. This can be fixed by moving the 
resource to the same domain or enabling CORS.

我进一步尝试：

$httpProvider.defaults.headers.get = { 'Access-Control-Allow-Origin': '*' };
$httpProvider.defaults.headers.get = { 'Access-Control-Request-Headers': 'X-Requested-With, accept, content-type' };
$httpProvider.defaults.headers.get = { 'Access-Control-Allow-Methods': 'GET, POST' };
$httpProvider.defaults.headers.get = { 'dataType': 'jsonp' };

我一直在想为什么在使用 Angular JS 时浏览器会阻止相同的 GET 请求。请建议我消除它。

编辑：我的下一步 id 在函数内分配建议：

app.directive('autoComplete', ['AutoCompleteService', function (AutoCompleteService) {
return {
    restrict: 'A',
    link: function (scope, elem, attr, ctrl) {
        elem.autocomplete({
            source: function (searchTerm, response) {
                AutoCompleteService.search(searchTerm.term).then(function (autocompleteResults) {
                    response($.map(autocompleteResults, function (autocompleteResult) {
                        return {
                            label: autocompleteResult.JumboID,
                            value: autocompleteResult.JumboID
                        }
                    }))
                });
            },
            minLength: 3,
            select: function (event, selectedItem) {
                // Do something with the selected item, e.g. 
                scope.yourObject = selectedItem.item.value;
                scope.$apply();
                event.preventDefault();
            }
        });
    }
};

}]);

Answer 1

将callback=JSON_CALLBACK 附加到您的网址，例如https://SuggestionsAPI.net/suggest?key=xyz&callback=JSON_CALLBACK

然后使用jsonp

$http.jsonp(url).
    success(function(data, status, headers, config) {
        //here
    }).
    error(function(data, status, headers, config) {
      //
    });