我使用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的头文件。


当前回答

对于那些使用带有API网关的Lambda集成代理的人,您需要配置您的Lambda函数,就像您直接向它提交请求一样,这意味着函数应该正确地设置响应头。(如果你使用自定义lambda函数,这将由API网关处理。)

// In your lambda's index.handler():
exports.handler = (event, context, callback) => {
    // On success:
    callback(null, {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Origin" : "*"
        }
    }
}

其他回答

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

“对飞行前请求的响应没有通过访问控制检查”正是问题所在:

在发出实际的GET请求之前,浏览器会检查服务是否为CORS正确配置。这是通过检查服务是否接受实际请求将使用的方法和头来完成的。因此,允许从不同的来源访问服务是不够的,还必须满足其他必要条件。

将报头设置为

Header always set Access-Control-Allow-Origin: www.example.com 
Header always set Access-Control-Allow-Methods: GET, POST, PUT, PATCH, POST, DELETE, OPTIONS 
Header always set Access-Control-Allow-Headers: Content-Type #etc...

这还不够。你必须添加一个重写规则:

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

飞行前的一个伟大的读响应没有HTTP ok状态。

在我的Apache VirtualHost配置文件中,我添加了以下几行:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

JavaScript XMLHttpRequest和Fetch遵循同源策略。所以, 使用XMLHttpRequest或Fetch的web应用程序只能生成HTTP 请求到自己的域。

来源:https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

你必须从你的服务器端发送Access-Control-Allow-Origin: * HTTP报头。

如果你使用Apache作为你的HTTP服务器,那么你可以像这样把它添加到你的Apache配置文件中:

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

Mod_headers在Apache中默认是启用的,但是,你可能想通过运行以下命令来确保它是启用的:

 a2enmod headers

我认为在Chrome中禁用CORS不是一个好方法,因为如果你在Ionic中使用它,在移动版本中肯定会再次出现这个问题。

所以最好修改后端。

首先,在header中,需要设置-

标题(“Access-Control-Allow-Origin: *”); header(' header set Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"');

如果API的行为是GET和POST,那么也设置在你的头-

if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {if (收取($ _SERVER [' HTTP_ACCESS_CONTROL_REQUEST_METHOD '])) header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 如果收取($ _SERVER [' HTTP_ACCESS_CONTROL_REQUEST_HEADERS '])) 标题(“Access-Control-Allow-Headers: {$ _SERVER [' HTTP_ACCESS_CONTROL_REQUEST_HEADERS ']}”);退出(0);}