AngularJS：允许跨域 AJAX 请求

Question

我正在尝试从我的新 Angular 应用程序调用 REST Web 服务。发出请求时，我收到此错误：

XMLHttpRequest 无法加载 http://localhost:8080/WebService。不 请求中存在“Access-Control-Allow-Origin”标头 资源。 Origin 'http://localhost' 因此不允许访问。

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

在 StackOverflow 中 one of the solutions 是禁用一些安全选项。我试过这样做，但没有成功，我得到了同样的错误。

然后another solution 建议将项目移动到服务器。所以我将我的项目移动到 WAMP 中的 www 文件夹中。它不起作用，因为我需要激活headers_module，然后修改httpd.conf 添加这个：

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

所以我激活了模块并修改了通用配置文件（不记得如何在我的 web 项目中执行此操作）并重新启动 WAMP。还是不行。

我唯一能做的就是在 Eclipse JEE 中创建一个 Web 项目并在 Tomcat 服务器上运行它。但我真的不想这样做。

我该如何解决这个问题？

编辑我还尝试将其添加到我的 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 的一个重要概念是回调，它本质上就是您将用来填充（JSONP 中的“P”）JSON 的内容。回调在 http 请求中作为参数传递。

这里是一些示例代码，我在我的 Web 应用程序中使用它们

（我的 php 层隐藏了我的开发者密钥并调用了第三方 api）：

$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'){
        ....
    }
}

（我的应用程序代码 - AngularJS）

//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
    });

希望对你有所帮助。