Flask 中跨域资源共享（CORS）策略错误的终极指南

php

2024-03-12 01:24:43

跨域资源共享（CORS）：在 Flask 中解决策略错误

前言

在现代 Web 开发中，跨域资源共享 (CORS) 是一种至关重要的安全机制，可防止恶意网站从其他域获取数据。但是，在使用 Flask 框架时，CORS 策略错误很常见。在这篇文章中，我们将探讨导致这些错误的原因以及如何有效地解决它们。

什么是 CORS？

CORS 是一组 HTTP 响应标头，允许浏览器从不同域加载资源。当浏览器从一个域向另一个域发送请求时，CORS 标头允许浏览器确定请求是否安全，并决定是否允许请求的响应。

Flask 中的 CORS 错误

在 Flask 中，当一个前端请求试图从一个域加载资源，而另一个域的服务器未允许 CORS 时，就会发生 CORS 策略错误。浏览器将阻止请求，并显示错误消息。

解决 CORS 错误

要解决 CORS 策略错误，你需要在后端服务器上启用 CORS 支持。以下是 Flask 中启用 CORS 的步骤：

1. 安装 Flask-Cors 库

pip install flask-cors

2. 导入 Flask-Cors 并初始化 CORS

from flask_cors import CORS
app = Flask(__name__)
CORS(app)  # 所有来源都有访问权限

3. 添加 CORS 标头到响应

在 Flask 路由函数中，向响应添加 CORS 标头。

@app.route('/submit', methods=['POST'])
def submit_data():
    # 其他代码
    return 'Veriler başarıyla alındı.', 200, {'Access-Control-Allow-Origin': '*'}

4. 在前端代码中添加 CORS 标头

在向后端发送请求之前，向前端代码添加 CORS 标头。

fetch("http://username.pythonanywhere.com/submit", {
    method: "POST",
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    body: formData,
  })