angularJS前端出现CORS错误



我使用的是一个前端有角度的烧瓶服务器。直到最近,我还在本地运行这个项目,没有遇到任何问题。

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

我的错误:

XMLHttpRequest无法加载http://ec2-..../api/loginStatus/.不请求的上存在"Access Control Allow Origin"标头资源原点'http://localhost:8100因此不允许通道响应的HTTP状态代码为503。

我的烧瓶服务器端代码片段(下面给出了我将头添加到响应中的位置):

@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'];

有人能在这里帮我吗?我参考了很多材料,我不确定自己做错了什么。

附言:我在服务器上收到了200条状态消息。因此,我假设错误发生在我的前端,而不是我的服务器端。如果我错了,请纠正我

谨致问候,Sunil

编辑

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

原来是nginx配置问题导致服务器不可用。

首先,为flask后端创建的符号链接出现了问题(我正在通过/home/username上的git repo运行服务器端,然后在/var/www/sitename.com上创建符号链接

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

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

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

所以你试过这个,我没有烧瓶的经验,但我不喜欢这个;

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

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

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

如果这不起作用,请验证是否确实设置了标头,您可以使用一个不同的程序,该程序不关心CORS,比如poster,或者如果不依赖Accept标头,则直接在浏览器中调用它。

以下是更多关于这一切的解读。https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

编辑:

好吧,我真傻:响应的HTTP状态代码是503。错误中的这一部分实际上说明了服务器给出的响应类型,因此当前服务器端存在错误。当它关闭或没有关闭时,就会发生这种情况。

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

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个请求标头,这可能也会导致一些问题?

烧瓶CORS

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

安装

使用pip或easy_Install安装扩展。

 $ pip install -U flask-cors

简单用法

在最简单的情况下,使用默认参数初始化Flask-Cors扩展,以便允许所有路由上的所有域使用Cors。阅读更多。

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/

相关内容

  • 没有找到相关文章

最新更新