我使用ngResource在亚马逊Web服务上调用REST API得到这个错误:

XMLHttpRequest无法加载 http://server.apiurl.com: 8000 / s /登录吗? =登录facebook。应对 飞行前请求未通过门禁检查:否 'Access-Control-Allow-Origin'头出现在被请求的对象上 资源。因此,来源“http://localhost”不允许访问。 错误405

服务:

socialMarkt.factory('loginService', ['$resource', function ($resource) {
    var apiAddress = "http://server.apiurl.com:8000/s/login/";
    return $resource(apiAddress, {
        login: "facebook",
        access_token: "@access_token",
        facebook_id: "@facebook_id"
    }, {
        getUser: {
            method: 'POST'
        }
    });
}]);

控制器:

[...]
loginService.getUser(JSON.stringify(fbObj)),
    function (data) {
        console.log(data);
    },
    function (result) {
        console.error('Error', result.status);
    }
[...]

我用Chrome浏览器。为了解决这个问题,我还能做些什么?

我甚至将服务器配置为接受来自源localhost的头文件。


当前回答

在PHP中,你可以添加头文件:

<?php
    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Expose-Headers: Content-Length, X-JSON");
    header("Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS");
    header("Access-Control-Allow-Headers: *");
    ...

其他回答

导致此错误的一个常见原因可能是主机API已经将请求映射到HTTP方法(例如,PUT),而API客户端正在使用不同的HTTP方法(例如,POST或GET)调用API。

检查请求是否发送到正确的端点。在我的Node.js项目中,我提到了错误的端点,请求将前往/api/txn/12345,端点是/api/txn而不是/api/txn/:txnId,这导致了这个错误。

使用API网关中的CORS选项,我使用了上面所示的以下设置。

另外,请注意,函数必须返回HTTP状态200以响应OPTIONS请求,否则CORS也会失败。

说到CORS,有一些注意事项。首先,它不允许通配符*,但不要在这一点上束缚我。我在什么地方读过,现在找不到那篇文章了。

如果您正在从不同的域发出请求,则需要添加允许起源标头。

Access-Control-Allow-Origin: www.other.com

如果您正在发出影响服务器资源的请求,如POST/PUT/PATCH,并且如果MIME类型不同于以下应用程序/x-www-form-urlencoded, multipart/form-data或text/plain,浏览器将自动发出一个pre-flight OPTIONS请求,以检查服务器是否允许这样做。

所以你的API/服务器需要相应地处理这些OPTIONS请求,你需要用适当的访问控制头进行响应,http响应状态码需要是200。

标题应该是这样的,根据你的需要调整它们:

   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

max-age报头很重要,在我的情况下,没有它就不能工作,我猜浏览器需要多长时间的“访问权限”是有效的信息。

此外,如果你正在使用application/json mime从不同的域发出POST请求,你还需要添加前面提到的allow origin头,所以它看起来像这样:

   Access-Control-Allow-Origin: www.other.com
   Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS
   Access-Control-Allow-Headers: Content-Type
   Access-Control-Max-Age: 86400

当飞行前成功并获得所有需要的信息时,您的实际请求将被提出。

一般来说,无论在初始请求或预飞行请求中请求了什么Access-Control头,都应该在响应中给出,以便它能够工作。

在MDN文档中有一个很好的例子,你也应该看看Stack Overflow的帖子。

对于任何使用API网关的HTTP API和代理路由ANY /{proxy+}的人

为了使CORS工作,您需要显式地定义路由方法。

我希望在AWS文档中更明确地为HTTP API配置CORS

我和AWS支持人员打了两个小时的电话,他们把他们的一个高级HTTP API开发人员圈了进来,他提出了这个建议。