AngularJS：允许跨域 AJAX 请求

Posted 2023-02-27

【中文标题】AngularJS：允许跨域 AJAX 请求

【英文标题】：AngularJS: allow cross-domain AJAX request

【发布时间】：2016-03-03 07:36:30

【问题描述】：

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

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

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

在 *** 中 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'];
]);

问题依然存在。

【问题讨论】：

嗨，如果你还没有这样做的话。尝试在您的 Angular 应用程序中添加以下代码，希望问题能够得到解决。 your_app_name.config(['$httpProvider', function($httpProvider) $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; ]);

是的，我忘了说我也试过了。同样的问题。

我可以知道您使用什么作为后端（服务器）吗？

我提到我正在使用 WAMP 并修改了 apache 模块和配置，所以...显然是 Apache。

您必须在 .htaccess 或您可以在 apache Access-Control-Allow-Methods 中配置的任何位置指定此标头：POST、PUT、DELETE、GET、OPTIONS Access-Control-Allow-Headers : X-Requested-With,ORIGIN, Content-type.

【参考方案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
    );

希望对你有所帮助。

【讨论】：

抱歉，网址损坏，我在手机上输入此内容

是的，我也看到了该解决方案。但它只允许 GET 请求。正如我提到的，我的 Web 服务是 REST，所以我需要使用所有不同的 HTTP 动词 :(