用Flask解决跨源资源共享


81

对于以下ajax发布请求Flask如何使用从flask中的ajax发布的数据?):

$.ajax({
    url: "http://127.0.0.1:5000/foo", 
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({'inputVar': 1}),
    success: function( data ) { 
        alert( "success" + data );
    }   
});

我收到一个Cross Origin Resource Sharing (CORS)错误:

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'null' is therefore not allowed access. 
The response had HTTP status code 500.

我尝试通过以下两种方式解决问题,但似乎没有任何效果。

  1. 使用Flask-CORS

这是Flask处理的扩展CORS,应使跨域AJAX成为可能。

我的pythonServer.py使用此解决方案:

from flask import Flask
from flask.ext.cors import CORS, cross_origin

app = Flask(__name__)
cors = CORS(app, resources={r"/foo": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route('/foo', methods=['POST','OPTIONS'])
@cross_origin(origin='*',headers=['Content-Type','Authorization'])
def foo():
    return request.json['inputVar']

if __name__ == '__main__':
    app.run()
  1. 使用特定的Flask装饰器

这是Flask官方代码片段,定义了一个装饰器,该装饰器应允许CORS其装饰功能。

我的pythonServer.py使用此解决方案:

from flask import Flask, make_response, request, current_app
from datetime import timedelta
from functools import update_wrapper

app = Flask(__name__)

def crossdomain(origin=None, methods=None, headers=None,
                max_age=21600, attach_to_all=True,
                automatic_options=True):
    if methods is not None:
        methods = ', '.join(sorted(x.upper() for x in methods))
    if headers is not None and not isinstance(headers, basestring):
        headers = ', '.join(x.upper() for x in headers)
    if not isinstance(origin, basestring):
        origin = ', '.join(origin)
    if isinstance(max_age, timedelta):
        max_age = max_age.total_seconds()

    def get_methods():
        if methods is not None:
            return methods

        options_resp = current_app.make_default_options_response()
        return options_resp.headers['allow']

    def decorator(f):
        def wrapped_function(*args, **kwargs):
            if automatic_options and request.method == 'OPTIONS':
                resp = current_app.make_default_options_response()
            else:
                resp = make_response(f(*args, **kwargs))
            if not attach_to_all and request.method != 'OPTIONS':
                return resp

            h = resp.headers

            h['Access-Control-Allow-Origin'] = origin
            h['Access-Control-Allow-Methods'] = get_methods()
            h['Access-Control-Max-Age'] = str(max_age)
            if headers is not None:
                h['Access-Control-Allow-Headers'] = headers
            return resp

        f.provide_automatic_options = False
        return update_wrapper(wrapped_function, f)
    return decorator

@app.route('/foo', methods=['GET','POST','OPTIONS'])
@crossdomain(origin="*")
def foo():
    return request.json['inputVar']

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

您能说明为什么会这样吗?


你知道了吗?我遇到了完全相同的问题:(
shao 2014年

这是一个古老的问题,但请确保:是否重新启动了Flask服务器?我还想知道为什么即使我认为一切都应有的错误,我还是遇到同样的错误。原来,您必须重新启动服务器才能使其真正生效
Juha Untinen

Answers:


49

在对代码进行一些修改之后,它像冠军一样工作

# initialization
app = Flask(__name__)
app.config['SECRET_KEY'] = 'the quick brown fox jumps over the lazy   dog'
app.config['CORS_HEADERS'] = 'Content-Type'

cors = CORS(app, resources={r"/foo": {"origins": "http://localhost:port"}})

@app.route('/foo', methods=['POST'])
@cross_origin(origin='localhost',headers=['Content- Type','Authorization'])
def foo():
    return request.json['inputVar']

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

我将*替换为localhost。由于我在许多博客和帖子中都读过,因此您应该允许访问特定域


2
如果有人在使用蓝图,则需要向每个蓝图添加CORS(),例如:my_blueprint = Blueprint('my_bp_name',name,url_prefix =“ / my-prefix”)CORS(my_blueprint)
BLang

88

您可以通过以下简单方法获得结果:

@app.route('your route', methods=['GET'])
def yourMethod(params):
    response = flask.jsonify({'some': 'data'})
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

1
最好添加跨域实现!
FlorescuCătălin16年

简单有效
安东尼

4
辉煌!我同意,简单有效。国际海事组织应被接受的答案
PALEN

3
@Salvador Dali-如果我渲染的是模板而不是json对象,您知道允许交叉起点的正确方法吗?即代码的最后一行yourMethod是:return render_template('template.html',some_var = response)
Matteo

3
可以在发布方法中使用吗?我尝试了一种文件上传方法,但失败了。
W.Leto

60

好吧,我面临着同样的问题。对于可能登陆此页面的新用户。只需遵循其官方文档。

安装烧瓶芯

pip install -U flask-cors

然后在应用初始化之后,flask-cors使用默认参数进行初始化:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

这为我提供了以下错误:从源“ 127.0.0.1:5000 ”对“ my_domain”处的XMLHttpRequest的访问已被CORS策略阻止:对预检请求的响应未通过访问控制检查:“ Access-Control-Allow- Origin”标头包含多个值“ 127.0.0.1:5000,* ”,但仅允许一个。
humblePilgrim


Tks也对我有用!
何塞

为我工作!非常感谢:)
XpressGeek

如何设置Access-Control-Max-Ageflask_cors
DragonKnight

5

也可能使这个答案。今天我遇到了同样的问题,这比预期的更多。添加CORS功能后,即使代码正确,也必须重新启动Flask服务器(ctrl + c->python manage.py runserver或使用的任何一种方法),以使更改生效。否则,CORS将在活动实例中不起作用。

这对我来说是这样,它的工作原理(Python 3.6.1,Flask 0.12):

factory.py

from flask import Flask
from flask_cors import CORS  # This is the magic


def create_app(register_stuffs=True):
    """Configure the app and views"""
    app = Flask(__name__)
    CORS(app)  # This makes the CORS feature cover all routes in the app

    if register_stuffs:
        register_views(app)
    return app


def register_views(app):
    """Setup the base routes for various features."""
    from backend.apps.api.views import ApiView
    ApiView.register(app, route_base="/api/v1.0/")

views.py

from flask import jsonify
from flask_classy import FlaskView, route


class ApiView(FlaskView):
    @route("/", methods=["GET"])
    def index(self):
        return "API v1.0"

    @route("/stuff", methods=["GET", "POST"])
    def news(self):
        return jsonify({
            "stuff": "Here be stuff"
        })

在我的React应用程序console.log中:

Sending request:
GET /stuff
With parameters:
null
bundle.js:17316 Received data from Api:
{"stuff": "Here be stuff"}

4

请注意,Access-Control-Allow-Origin在很多情况下(例如这种情况),在Flask响应对象中设置标题是可以的,但是在服务静态资产时(至少在生产设置中),它没有任何作用。这是因为静态资产直接由前端Web服务器(通常是Nginx或Apache)提供服务。因此,在这种情况下,您必须在Web服务器级别而不是Flask中设置响应标头。

有关更多详细信息,请参阅我前一段时间写的这篇文章,解释了如何设置标头(在我的情况下,我试图进行Font Awesome资产的跨域服务)。

另外,正如@Satu所说,在JS AJAX请求的情况下,您可能只需要允许对特定域的访问。对于请求静态资产(如字体文件),我认为规则不太严格,并且允许任何域的访问都被接受。


3

我用了阿明·罗纳彻(Armin Ronacher)给的装饰提供的,几乎没有修改(由于客户端要求的标头不同)。(在这里我使用angular作为请求应用程序/ json类型的请求者)。

在以下位置对代码进行了稍微的修改,

from flask import jsonify

@app.route('/my_service', methods=['POST', 'GET','OPTIONS'])
@crossdomain(origin='*',headers=['access-control-allow-origin','Content-Type'])
def my_service():
    return jsonify(foo='cross domain ftw')

jsonify将发送一个application / json类型,否则为text / html。在我针对这些标头的请求中,标头被添加为客户端

 const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin':'*'
      })
    };
    return this.http.post<any>(url, item,httpOptions)

2
给装饰链接是死的
何塞托马斯腌肠

2

注意:cross_origin的位置应该正确并且已安装依赖项。在客户端,确保指定使用哪种类型的数据服务器。例如application / json或text / html

对我来说,下面写的代码确实神奇

from flask import Flask,request,jsonify
from flask_cors import CORS,cross_origin
app=Flask(__name__)
CORS(app, support_credentials=True)
@app.route('/api/test', methods=['POST', 'GET','OPTIONS'])
@cross_origin(supports_credentials=True)
def index():
    if(request.method=='POST'):
     some_json=request.get_json()
     return jsonify({"key":some_json})
    else:
        return jsonify({"GET":"GET"})


if __name__=="__main__":
    app.run(host='0.0.0.0', port=5000)

你为什么在做同样的事情(support_credentials = True)cross_origin
艾兹(Eziz Durdyyev)

0

我为类似的事情苦苦挣扎。请尝试以下操作:

  1. 使用某种可以显示HTML标头的浏览器插件。
  2. 输入服务的URL,然后查看返回的标头值。
  3. 确保将Access-Control-Allow-Origin设置为一个域,并且只有一个域,该域应该是请求的来源。不要将Access-Control-Allow-Origin设置为*。

如果这样做没有帮助,请查看本文。它在PHP上,但是它准确地描述了必须将哪些标头设置为CORS才能工作。

适用于IE,Firefox,Chrome和Safari的CORS


0

我可能在这个问题上迟到了,但是下面的步骤解决了这个问题

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.