angularjs - 在angularJS前端出现CORS错误

Question

我正在使用带有 Angular 前端的 flask 服务器。直到最近，我还在本地运行该项目并且没有任何问题。

我现在将我的项目移动到远程服务器并收到以下错误。我不确定我做错了什么:

我的错误:

XMLHttpRequest cannot load http://ec2-..../api/loginStatus/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503.

我的 flask 服务器端代码的片段(我将我的 header 添加到响应中，如下所示):

@app.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin','http://localhost:8100')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
    response.headers.add('Access-Control-Allow-Credentials', 'true')
    return response

我在前端 angularjs 中同时使用了 restangular 和 $http 方法。

我在主模块的 .config 中添加了以下几行:

.config(['RestangularProvider', '$stateProvider', '$urlRouterProvider','$httpProvider',
  function(RestangularProvider, $stateProvider, $urlRouterProvider,$httpProvider) {

        //$httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.common['Access-Control-Allow-Origin'] = "http://localhost:8100";
        $httpProvider.defaults.withCredentials = true;
        $httpProvider.defaults.headers.common = 'Content-Type: application/json';
        delete $httpProvider.defaults.headers.common['X-Requested-With'];

有人可以在这里帮助我吗？我引用了很多 Material ，但我不确定我做错了什么。

PS:我的服务器上收到 200 条状态消息。因此，我假设错误出现在我的前端，而不是我的服务器端。如果我错了请纠正我

问候，
苏尼尔

编辑

大家好，我已经解决了这个问题。我要感谢@Mathijs Segers 和@Hassan Mehmood 的投入。

事实证明，存在导致服务器不可用的 nginx 配置问题。

首先，为 flask 后端创建的符号链接(symbolic link)存在问题(我通过/home/username 上的 git repo 运行服务器端，然后在/var/www/sitename.com 上创建符号链接(symbolic link)

我还限制了一秒钟内可以发送的请求数量(用户每 2 秒只能发送 1 个)，导致 503 错误。

修复后我提出的原始代码运行良好。

Answer 1

Eyooo，它实际上在您的服务器端。您需要提供正确的标题。

所以你已经试过了，我没有 flask 的经验，但我不喜欢这个；

response.headers.add('Access-Control-Allow-Origin','http://localhost:8100')

出于测试目的，我建议您将 http://部分更改为 *
所以

 response.headers.add('Access-Control-Allow-Origin','*')

如果这不起作用，请验证是否确实设置了 header ，您可以使用不关心 CORS 的不同程序(如 postman )，或者如果它不依赖于 Accept header ，则直接在浏览器中调用它。

这里有更多关于这一切的阅读 Material 。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

编辑:

好吧，我很傻:响应的 HTTP 状态代码为 503。
错误中的这一部分实际上说明了您的服务器正在给出什么样的响应，因此目前您的服务器端存在错误。这种情况发生在 f/e 下降或不下降时。

所以看起来你没有做任何奇怪的事情，但你的服务器端似乎坏了。

XMLHttpRequest cannot load http://ec2-..../api/loginStatus/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access. The response had HTTP status code 503.

所以这里的这个错误，我建议看看你的标题，也许禁用一些。您目前只允许 2 个可能会导致某些问题的请求 header ？