对预检请求的响应未通过访问控制检查

Question

我使用 ngResource 在 Amazon Web Services 上调用 REST API 时遇到此错误：

XMLHttpRequest 无法加载

http://server.apiurl.com:8000/s/login?login=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 的标头。

原文由 Andre Mendes 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我的“API 服务器”是一个 PHP 应用程序，所以为了解决这个问题，我找到了以下解决方案：

将这些行放在文件 index.php 中：

 header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');

原文由 Slipstream 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您遇到了 CORS 问题。

有几种方法可以解决/解决此问题。

1. 关闭 CORS。例如： 如何在 chrome 中关闭 cors

2. 为您的浏览器使用插件

3. 使用 nginx 之类的代理。 如何设置的示例

4. 完成服务器的必要设置。这更多是您在 EC2 实例上加载的 Web 服务器的一个因素（假设这就是您所说的“Amazon Web 服务”）。对于您的特定服务器，您可以参考 启用 CORS 网站。

更详细地说，您正在尝试从 localhost 访问 api.serverurl.com。这就是跨域请求的准确定义。

通过关闭它只是为了完成您的工作（好的，但是如果您访问其他网站并且只是在路上踢罐子，那么您的安全性会很差）或者您可以使用代理，让您的浏览器认为所有请求都来自本地主机当你真的有本地服务器然后调用远程服务器时。

所以 api.serverurl.com 可能会变成 localhost:8000/api 并且您的本地 nginx 或其他代理将发送到正确的目的地。

---

现在，根据大众的需求， CORS 信息增加了 100% ……同样的美味！

---

绕过 CORS 正是那些只学习前端的人所展示的。

https://codecraft.tv/courses/angular/http/http-with-promises/

原文由 E. Maggini 发布，翻译遵循 CC BY-SA 4.0 许可协议