使用Flask解决跨域资源共享问题

151

针对以下用于Flaskajax post请求(如何在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

这是一个用于处理 CORSFlask 扩展,应该可以实现跨域 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
这是一个老问题,但为了确保:您是否重新启动了Flask服务器?我也想知道为什么我得到了相同的错误,即使一切都完全按照应该的方式进行。事实证明,您必须重新启动服务器才能真正生效。 - Juha Untinen
15个回答

154

你可以通过简单的方法获得结果:

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

2
简单而有效 - Anthony
7
太棒了!我同意,简单而有效。在我看来,应该被接受为答案。 - PALEN
6
如果我渲染模板而不是只返回JSON对象,你知道允许跨域的正确方式吗?也就是说,在yourMethod中的最后一行代码是:return render_template('template.html',some_var = response) - Matteo
4
这能在POST方法中使用吗?我尝试了文件上传,但失败了。 - W.Leto
3
@Matteo,已经过去4年了,但您可以像这样做:response = make_response(render_template('index.html', foo=42))response.headers.add('Access-Control-Allow-Origin', '*') - oeter
显示剩余2条评论

136

我也曾面临同样的问题。对于可能会来到这个页面的新用户,只需按照官方文档进行操作。

安装flask-cors。

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!"

11
对我来说,这会出现以下错误:XMLHttpRequest 访问 'my_domain' 从源 'http://127.0.0.1:5000' 被 CORS 策略阻止:预检请求的响应未通过访问控制检查:'Access-Control-Allow-Origin' 标头包含多个值 'http://127.0.0.1:5000, *',但只允许一个。 - humblePilgrim
我也可以,谢谢! - Jose
对我有用!谢谢。这应该是被采纳的答案! - mattyb
补充我的两分钱...我仍然遇到了CORS错误,但是当我运行heroku logs --tail时,我看到了一个模块导入错误。然后我在requirements.txt文件中添加了Flask-Cors==3.0.10,它就可以工作了。我不需要重新启动dynos。另外,您可以运行pip freeze > requirements.txt自动获取所有模块要求。 - Alaa M.
现在这才是我所谓的堆栈溢出答案。下一件事情是我必须花整个晚上阅读它的安全漏洞。谢谢 - codingbruh
显示剩余2条评论

86

在稍微修改一下您的代码后,它像冠军一样运行良好。

# 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替换了*。因为根据我阅读过的许多博客和帖子,应该允许特定域名的访问。


13
如果有人在使用蓝图,你需要为每个蓝图添加CORS(),例如:my_blueprint = Blueprint('my_bp_name', name, url_prefix="/my-prefix") CORS(my_blueprint) - BLang
1
请参见以下一行代码:https://dev59.com/IF8d5IYBdhLWcg3wTQsn#46637194 - mattyb

9
可以把这个回答当成一个解决方案。今天我也遇到了同样的问题,但它比我想象中的要简单得多。在添加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"}

7
请注意,在 Flask 响应对象中设置 Access-Control-Allow-Origin 标头在许多情况下(如本例)是可以的,但是当提供静态资源时(至少在生产设置中),它没有任何效果。这是因为静态资源直接由前端 Web 服务器(通常是 Nginx 或 Apache)提供服务。因此,在这种情况下,您必须在 Web 服务器级别上设置响应标头,而不是在 Flask 上进行设置。
有关更多详细信息,请参见我之前撰写的文章,解释如何设置标头(在我的情况下,我试图实现 Font Awesome 资源的跨域服务)。
此外,正如@Satu所说,对于 JS AJAX 请求,您可能需要仅允许特定域访问。对于请求静态资产(如字体文件),我认为规则不那么严格,允许任何域访问更为普遍接受。

7
注意: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)

3
为什么在cross_origin中你要做同样的事情(support_credentials=True)? - Eziz Durdyyev

7

可能我对这个问题有些迟到,但是以下步骤可以解决这个问题。

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

2

我认为问题出在预检请求上。 如果你使用@route @put @patch @delete修饰符,似乎没有有效的方法可以禁用自动响应OPTIONS请求。 我的解决方法是在API开始时(在任何装饰函数之前)使用以下代码段。

def option_todo(id): 
  return '', 204 
 
app.add_url_rule('/', view_func=option_todo, provide_automatic_options=False, methods=['OPTIONS']) 
app.add_url_rule(r'/<path:path>', view_func=option_todo, provide_automatic_options=False, methods=['OPTIONS']) 

@app.after_request
def after_request(response):
  response.headers['Access-Control-Allow-Methods']='*'
  response.headers['Access-Control-Allow-Origin']='*'
  response.headers['Vary']='Origin'
  return response

2
我的解决方案是:
@app.after_request
def handle_options(response):
    response.headers["Access-Control-Allow-Origin"] = "*"
    response.headers["Access-Control-Allow-Methods"] = "GET, POST, PUT, DELETE, OPTIONS"
    response.headers["Access-Control-Allow-Headers"] = "Content-Type, X-Requested-With"

    return response

对我来说很有效,谢谢伙计。 - undefined

2
我使用了由Armin Ronacher提供的装饰器,进行了一些小修改(因为客户端请求的标题不同)。并且这对我很有效(其中我使用了Angular作为请求应用程序,请求类型为application/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)

6
装饰器的链接已经失效。 - José Tomás Tocino

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接