如何解决Python Flask与Vue.js联调时的跨域CORS访问限制？-Python教程-PHP中文网

flask-cors是官方生态中最稳妥的跨域解法，因flask默认不发cors响应头，浏览器按同源策略拦截请求；需安装后初始化cors(app)，避免手动设头或nginx双重配置引发冲突，且全局配置比@cross_origin装饰器更可靠、易维护。

如何解决python flask与vue.js联调时的跨域cors访问限制？

直接用 Flask-CORS，别手写响应头，也别靠 Nginx 代理绕开——它不是临时 workaround，而是 Flask 官方生态里最稳的跨域解法。

这不是 Vue 或 Flask 写错了，是 Flask 默认压根不发 CORS 相关响应头。浏览器按同源策略直接拦截，哪怕后端逻辑跑通、返回了 200 和正确数据，前端 fetch 或 axios 也会卡在预检（OPTIONS）或直接抛错。

常见现象包括：Failed to fetch、控制台显示 No 'Access-Control-Allow-Origin' header、Network 面板里 OPTIONS 请求返回 404 或 200 但后续 POST 被 block。

Vue 开发服务器跑在 http://localhost:5173，Flask 在 http://localhost:5000，协议+域名+端口三者任一不同即跨域
简单请求（如 GET + application/json）可能“碰巧”通，但带 body 的 POST、自定义 header、Content-Type: application/json 都会触发预检，必须后端明确响应 Access-Control-Allow-Methods 等头
手动在每个路由里用 make_response + headers 补头，极易漏、难维护、无法统一控制 credentials 和 methods

安装后两行初始化即可覆盖全部路由，比装饰器更可靠，尤其适合联调阶段快速打通。

pip install flask-cors

下载

然后在 Flask 入口文件里：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, resources={r"/api/*": {"origins": "http://localhost:5173"}})

resources 参数支持路径匹配，r"/api/*" 比 r"/*" 更安全，避免把管理接口也暴露出去
开发时可先用 origins="*"，但必须确认没开 supports_credentials=True——二者共存会被浏览器拒绝
如果要用 cookie 或 Authorization header，必须同时设 supports_credentials=True，且前端 fetch 要加 credentials: "include"，Axios 要设 withCredentials: true
resources 还能细化到方法级，比如 {"methods": ["GET", "POST"], "allow_headers": ["Content-Type", "X-Requested-With"]}

它只作用于单个视图函数，看似轻量，实际踩坑率高。

新增一个 @app.route("/new-api") 就得补一个 @cross_origin，漏一次整个接口就跨域失败
和蓝图（Blueprint）混用时，装饰器位置稍有偏差（比如加在 blueprint 实例上而非具体视图）就会失效
Flask-RESTful 的 Resource 类对装饰器支持不稳定，某些版本下根本不起作用
无法统一控制全局行为，比如所有接口都要允许 PUT 和 DELETE，就得每个装饰器重复写 methods=["GET", "POST", "PUT", "DELETE"]

这通常不是 CORS 配置问题，而是预检通过后，真实 POST 请求因内容类型或数据格式被后端拒绝。

检查前端是否发了 Content-Type: application/json，Flask 默认不自动解析 JSON body，需显式调用 request.get_json()；若用 request.form 却发 JSON，会返回 400
确保 CORS(app) 初始化在所有路由注册之前，否则部分路由可能未被中间件包裹
如果用了 supports_credentials=True，前端必须设 credentials: "include"，且后端响应头中 Access-Control-Allow-Origin 不能为 *，必须精确匹配前端 origin
生产环境部署后，origins="*" 和 supports_credentials=True 绝对不能共存，这是浏览器硬性限制，不是 Flask 问题