如何在烧瓶中启用CORS

Question

我试图使用jquery发出一个跨源请求，但它一直被消息拒绝

无法加载XMLHttpRequesthttp://...请求的资源上不存在“Access Control Allow Origin”标头。起源因此不允许访问。

客户端代码如下所示：

$(document).ready(function() {
    $('#submit_contact').click(function(e){
        e.preventDefault();
        $.ajax({
            type: 'POST',
            url: 'http://...',
            // data: [
            //      { name: "name", value: $('name').val()},
            //      { name: "email", value: $('email').val() },
            //      { name: "phone", value: $('phone').val()},
            //      { name: "description", value: $('desc').val()}
            //
            // ],
            data:"name=3&email=3&phone=3&description=3",
            crossDomain:true,
            success: function(msg) {
                alert(msg);
            }
        });
    }); 
});

在heroku这边，我用的是烧瓶，它是这样的

from flask import Flask,request
from flask.ext.mandrill import Mandrill
try:
    from flask.ext.cors import CORS  # The typical way to import flask-cors
except ImportError:
    # Path hack allows examples to be run without installation.
    import os
    parentdir = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
    os.sys.path.insert(0, parentdir)

    from flask.ext.cors import CORS
app = Flask(__name__)

app.config['MANDRILL_API_KEY'] = '...'
app.config['MANDRILL_DEFAULT_FROM']= '...'
app.config['QOLD_SUPPORT_EMAIL']='...'
app.config['CORS_HEADERS'] = 'Content-Type'

mandrill = Mandrill(app)
cors = CORS(app)

@app.route('/email/',methods=['POST'])
def hello_world():
    name=request.form['name']
    email=request.form['email']
    phone=request.form['phone']
    description=request.form['description']

    mandrill.send_email(
        from_email=email,
        from_name=name,
        to=[{'email': app.config['QOLD_SUPPORT_EMAIL']}],
        text="Phone="+phone+"\n\n"+description
    )

    return '200 OK'

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

Answer 1

我刚刚遇到了同样的问题，我开始相信其他答案比它们需要的要复杂一些，因此，对于那些不想依赖更多图书馆或装饰师的人，我的方法如下：

一个CORS请求实际上由两个HTTP请求组成。一个预飞行请求，然后是一个实际的请求，只有在预飞行成功通过时才会发出。

在实际的跨域POST请求之前，浏览器将发出一个OPTIONS请求。此响应不应该返回任何主体，而只返回一些令人放心的标题，告诉浏览器可以执行此跨域请求，并且它不是某些跨站点脚本攻击的一部分。

我使用flask模块中的make\u response函数编写了一个Python函数来构建这个响应。

def _build_cors_preflight_response():
    response = make_response()
    response.headers.add("Access-Control-Allow-Origin", "*")
    response.headers.add("Access-Control-Allow-Headers", "*")
    response.headers.add("Access-Control-Allow-Methods", "*")
    return response

此响应是一个通配符响应，适用于所有请求。如果您想通过CORS获得额外的安全性，那么必须提供源、头和方法的白名单。

此响应将说服您的（Chrome）浏览器继续执行实际请求。

当服务于实际请求时，您必须添加一个CORS头，否则浏览器将不会返回对调用JavaScript代码的响应。相反，请求将在客户端失败。jsonify示例

response = jsonify({"order_id": 123, "status": "shipped"}
response.headers.add("Access-Control-Allow-Origin", "*")
return response

我还为此编写了一个函数。

def _corsify_actual_response(response):
    response.headers.add("Access-Control-Allow-Origin", "*")
    return response

允许您返回一行。

from flask import Flask, request, jsonify, make_response
from models import OrderModel

flask_app = Flask(__name__)

@flask_app.route("/api/orders", methods=["POST", "OPTIONS"])
def api_create_order():
    if request.method == "OPTIONS": # CORS preflight
        return _build_cors_preflight_response()
    elif request.method == "POST": # The actual request following the preflight
        order = OrderModel.create(...) # Whatever.
        return _corsify_actual_response(jsonify(order.to_dict()))
    else:
        raise RuntimeError("Weird - don't know how to handle method {}".format(request.method))

def _build_cors_preflight_response():
    response = make_response()
    response.headers.add("Access-Control-Allow-Origin", "*")
    response.headers.add('Access-Control-Allow-Headers', "*")
    response.headers.add('Access-Control-Allow-Methods', "*")
    return response

def _corsify_actual_response(response):
    response.headers.add("Access-Control-Allow-Origin", "*")
    return response

Answer 2

好的，我不认为galuszkak提到的官方代码片段应该在任何地方都使用，我们应该关注在处理过程中可能会触发一些bug的情况，比如hello\u world函数。无论响应是正确的还是不正确的，accesscontrolalloworigin头是我们应该关注的。所以，事情很简单，就像下面所说的：

@blueprint.after_request # blueprint can also be app~~
def after_request(response):
    header = response.headers
    header['Access-Control-Allow-Origin'] = '*'
    return response

就这些~~

Answer 3

以下是我部署到Heroku时对我起作用的内容。

http://flask-cors.readthedocs.org/en/latest/
通过运行-pip Install-U flask cors安装flask cors

from flask import Flask
from flask_cors import CORS, cross_origin
app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

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