如何在 Flask 中启用 CORS

我正在尝试使用 jquery 发出跨源请求，但它一直被拒绝并显示消息

XMLHttpRequest 无法加载 http://... No 'Access-Control-Allow-Origin' 标头存在于所请求的资源上。起源...因此 不允许访问。

我正在使用flask、heroku 和jquery

客户端代码如下所示：

$(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 端我正在使用flask，它是这样的

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()

以下是有关如何在 Flask 中启用 CORS 的分步指南，以解决遇到的错误并允许的 jQuery 代码进行跨源请求：

1. 安装 Flask-CORS

如果还没有安装它，请使用 pip 安装 Flask-CORS 扩展：

bash pip install Flask-CORS

2. 将 Flask-CORS 导入的应用程序

在的 Flask 应用程序中，导入 CORS 并创建一个实例：

```python from flask import Flask from flask_cors import CORS

app = Flask( name ) CORS(app) ``` 这将启用 CORS，并允许从任何来源进行请求。

3. 配置 CORS 以获得更精细的控制（可选）

可以通过将 resources 参数传递给 CORS() 来配置 CORS，以允许来自特定来源、方法或标头的请求：

python cors = CORS(app, resources={r"/email/": {"origins": "http://your-domain.com"}})

• 将 http://your-domain.com 替换为的 jQuery 代码所在的实际来源。
• 如果的前端在本地运行在不同的端口（例如 http://localhost:5000 ），请确保在此处包含该端口。
• 可以使用 * 允许来自任何来源的请求，但不建议在生产环境中使用，因为它会带来安全风险。

有关更多自定义选项，例如允许的标头和方法，请参阅 Flask-CORS 文档： https://flask-cors.readthedocs.io/en/latest/

4. 测试的应用程序

通过运行的 Flask 应用程序并再次使用的 jQuery 代码从不同的来源发出请求来测试更改。现在应该可以成功发出跨源请求，而不会遇到 CORS 错误。

其他提示

• 调试： 如果仍然遇到问题，请检查浏览器的开发者控制台中的“网络”选项卡，以获取有关请求和响应的详细信息，包括发送的任何 CORS 标头。
• 安全性： 始终谨慎地允许跨源请求，并在生产环境中避免使用 origins='*' 等宽松设置。
• 预检请求： 对于涉及 Authorization 标头或 Content-Type 以外的内容类型的复杂请求，浏览器可能会发送“预检” OPTIONS 请求。确保的 Flask 应用程序也处理这些请求。

通过执行这些步骤，将能够启用 CORS 并解决在 Flask 应用程序中遇到的跨源请求问题。