在使用python flask-restful并使用AngularJS(使用$http)时获得CORS (Cross-O

Question

我使用一个python程序来提供一个带有flask-restful扩展的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两次我得到这个错误…(当然还有我的错误警报)

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的误差。这些是在post

的情况下的头文件(从firebug network选项卡复制)

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

我已经试过了

• 在get和post方法上面添加@cors.crossdomain(origin='*') (https://github.com/twilio/flask-restful/pull/131)
• 将此api.decorators=[cors.crossdomain(origin='*')]添加到整个api中(flask-restful的CORS中出现TypeError)
• 正如你所看到的，我已经遵循了这里提供的答案之一的链接(Flask RESTful跨域问题与Angular: PUT, OPTIONS方法)，但我没有得到实际的答案。我不想重写任何后端和选项方法没有帮助我的类，太…

Answer 1

你可以使用after_request钩子来解决这个问题:

<>之前@app.after_requestdef after_request(反应):response.headers。添加(‘Access-Control-Allow-Origin’,‘*’)response.headers。add("Access-Control-Allow-Headers"、"内容类型、授权")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

Answer 2

如果你使用CORS进行AngularJS POST调用，有时它会触发(取决于你的MIME/Content-Type)先前的OPTIONS调用，以检查跨服务器请求在发送所有POST数据之前是否有效。因为你的API没有options方法，Flask会使用这个调用而不是Flask- restful，并且它不会设置CORS选项，这些选项只针对API资源定义。

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

def options(self):
    pass

要使整个工作，使用

定义cors选项

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

我不知道为什么，但我必须显式地将所有headers添加到列表中;使用headers = '*'不适合我。您可能还需要在将资源连接到API之前添加装饰器。

Answer 3

正如在另一个帖子上发布的，这是我的解决方案:

要在你的web服务api上允许远程CORS请求，你可以简单地像这样初始化你的flask 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请求来自每个源的每个路径。

Answer 4

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