3

我使用 python 程序来提供带有 Flask-restful 扩展的宁静服务。我想用 AngularJS 应用程序来使用它。我的本地主机上一切正常（目前）。为了使用服务，我使用 AngularJS $http，如下所示。每次我打电话时，我都会收到这个该死的 CORS 错误（见下文）......

在搜索了一天半之后，我尝试了许多不同的东西，但没有什么能帮助我防止这个问题，我真的不知道还能做什么。不幸的是，flask-restful 网站上没有官方文档。

我不确定我是否遗漏了任何明显的东西，或者这是否真的很难在这种技术组合中工作......

在我的帖子末尾，您会看到我已经尝试过的事情的列表......

顺便说一句，一个简单curl的工作......

我会很高兴提供任何帮助！

这是相关的python代码：

app = Flask(__name__)
api = Api(app)

class DatabaseRestRoomList(Resource):

def __init__(self):
    self.reqparse = reqparse.RequestParser()
    self.reqparse.add_argument('name', type=str, required=True,
        help='No room name provided')
    super(DatabaseRestRoomList, self).__init__()

def get(self):
    #make some logic to give a dict for the variable roomlist
    return (roomlist)

def post(self):
    args = self.reqparse.parse_args()
    name = args['name']
    db.createRoom(name)
    return ({'success': 'yes'})

api.add_resource(DatabaseRestRoomList, '/room')

if __name__ == '__main__':
    app.run(debug=True)

这是我的 Angularjs 服务代码：

app.service('deviceService', ['$http',
        function ($http) {

  this.getAllRooms = function () {
    var roomlist;
    var urlbase = "http://localhsot:5000"
    var urltail = "room"
    var newroom = { 'name': "NewXYRoom" };

    $http.post(urlbase + '/' + urltail, newroom).
    success(function (data, status, headers, config) {
        alert("success");
    }).
    error(function (data, status, headers, config) {
        alert("error..")
    });
}]);

当我尝试执行 get 或 post 两次时，我得到了这个 cors 错误......（当然还有我的错误警报）

XMLHttpRequest cannot load http://localhsot:5000/room. No 'Access-Control-Allow-Origin'
header is present on the requested resource. Origin 'http://localhost:53144' is therefore not allowed access.

如果我“只”做一个GET错误发生在 get 本身。如果我这样做，POST我会在OPTIONS. 这些是帖子的标题（从萤火虫网络选项卡复制）

Answer-Header
Cache-Control   no-cache
Connection  Keep-Alive
Content-Length  619
Content-Type    text/html; charset=utf-8
Pragma  no-cache
Proxy-Connection    Keep-Alive

Request-Header
Accept  text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Encoding gzip, deflate
Accept-Language en-us,de-de;q=0.8,de;q=0.5,en;q=0.3
Access-Control-Request-He...    content-type
Access-Control-Request-Me...    POST
Cache-Control   no-cache
Connection  keep-alive
Host    localhsot:5000
Origin  http://localhost:53144
Pragma  no-cache
User-Agent  Mozilla/5.0 (Windows NT 6.3; WOW64; rv:29.0) Gecko/20100101 Firefox/29.0

我已经试过了

4

4 回答 4

8

您可以使用 after_request 挂钩解决此问题：

@app.after_request
def after_request（响应）：
    response.headers.add('Access-Control-Allow-Origin', '*')
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE')
    返回响应

您可以在此处查看有关如何使用它的演示 - http://tutsbucket.com/tutorials/building-a-blog-using-flask-and-angularjs-part-1/

本教程还使用了 Flask-restful。

于 2015-03-08T04:33:36.897 回答
3

如果您POST使用 CORS 进行 AngularJS 调用，有时它会触发（取决于您的 MIME/Content-Type）在发送所有数据OPTIONS之前检查跨服务器请求是否有效的先前调用。POST由于您的 API 没有options方法，因此 Flask 接受调用而不是 Flask-Restful，并且它不会设置仅为 API 资源定义的 CORS 选项。

您可以解决定义虚拟options处理程序的问题：

def options(self):
    pass

要使整个工作正常，请使用定义 cors 选项

api.decorators = [cors.crossdomain(origin='*', headers=['accept', 'Content-Type'])]

我不知道为什么，但我必须明确地将所有添加headers到列表中；使用headers = '*'对我不起作用。在将资源连接到 API 之前，您可能还必须添加装饰器。

于 2014-05-29T17:38:06.180 回答
2

正如在另一个线程上发布的那样，这是我的解决方案：

要在您的 Web 服务 api 上允许远程 CORS 请求，您可以像这样简单地初始化您的烧瓶 restful API：

from flask import Flask
from flask_restful import reqparse, abort, Api, Resource
from flask_cors import CORS

app = Flask(__name__)
cors = CORS(app, resources={r"*": {"origins": "*"}})
api = Api(app)

这会将 CORS 标头添加到您的 api 实例中，并允许对来自每个源的每个路径的 CORS 请求。

于 2018-09-13T09:51:31.703 回答
1

Flask 扩展 Flask-cors ( https://github.com/corydolphin/flask-cors ) 对我来说效果很好。

于 2015-04-09T16:58:20.067 回答