AngularJS：允许跨域AJAX请求

Question

我试图从我的新Angular应用程序中调用REST web服务。当发出请求时，我会得到以下错误：

XMLHttpRequest无法加载http://localhost:8080/WebService。请求的资源上没有“访问-控制-允许-来源”标头。因此，不允许访问源“http：//localhost”。

我发现这是因为浏览器不允许这样的操作。

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</IfModule>

编辑我也试着把它添加到我的angular应用程序中：

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

问题仍然存在。

Answer 1

我在开发自己的web应用程序时遇到了同样的问题。这是CORS的问题。我为通过它所做的工作称为JSONP（JSON-Padding）。这种方法完全忽略了CORS。幸运的是，angularjs$HTML服务允许使用JSONP。

我将向您介绍angularjs文档的以下部分:https://docs.angularjs.org/api/ng/service/$http

JSONP的一个重要概念是回调，它本质上就是您将在JSON中填充（JSONP中的“P”）的内容。回调作为http请求中的参数传递。

$method = isset($_GET['method']) ? $_GET['method'] : '';

//Check for a callback, which is needed for JSONP
if(isset($_GET['callback'])){

    //Check which method is being called.
    //I use method to abstract out the long urls of api's
    if($method == 'get_data_a'){

        $url = 'https://some.api.url?api_key='.$key;
        $response = file_get_contents($url);

        //Pad the JSON response with a function named after the callback for JSONP
        //You're returning something that looks like
        //myCallbackName(myJSONString);
        echo $_GET['callback'] . '(' . $response . ')';

    }
    else if ($method == 'get_data_b'){
        ....
    }
}

//I reference my php layer for REST services ; callback=JSON_CALLBACK as per angularjs documentation
var url =  my_php_layer_url + '?method=get_data_a&callback=JSON_CALLBACK';

//Call webservice using angularjs $http and the shortcut method for JSONP
$http.jsonp(url)
    .success(function (result) {
        //do whatever you want with the result; the result is properly formatted JSON
    })
    .error(function (data, status) {
        //do whatever you want with the error
    });