angularJS 前端出现 CORS 错误

Question

我正在使用带有 angular 前端的烧瓶服务器。直到最近，我还在本地运行项目，没有任何问题。

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

我的错误：

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 服务器端代码片段（我将 headers 添加到响应的地方如下所示）：

@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 后端创建的符号 link 存在问题（我是运行我的服务器端，通过 [=46 上的 git 回购=] 然后在 /var/www/sitename.com

创建一个符号 link

我还限制了每秒可以发送的请求数（用户每 2 秒只能发送 1 个请求）导致 503 错误。

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

Answer 1

哎呀，居然在你的服务器端。您需要提供正确的 headers.

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

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

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

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

如果这不起作用，请验证 header 是否已实际设置，您可以使用其他不关心 CORS 的程序，如邮递员，或者如果不关心，则直接在浏览器中调用它' t 取决于 Accept headers.

这里有一些关于这一切的更多读物。 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.

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

Answer 2

Flask-CORS

用于处理跨源资源共享 (CORS) 的 Flask 扩展，使跨源 AJAX 成为可能。

安装

使用 pip 安装扩展，或 easy_install。

 $ pip install -U flask-cors

简单用法

在最简单的情况下，使用默认参数初始化 Flask-Cors 扩展，以允许所有路由上所有域的 CORS。 Read More.

from flask import Flask
from flask_cors import CORS, cross_origin

app = Flask(__name__)
CORS(app)

@app.route("/")
def helloWorld():
  return "Hello, cross-origin-world!"

参考： https://flask-cors.readthedocs.io/en/latest/

angularJS 前端出现 CORS 错误

Getting CORS error in angularJS front end

nginx

flask

http-status-code-503

angularjs

flask-cors

编辑：

Flask-CORS