Python前后端分离怎么做_Vue前端与Python后端API跨域交互实战指南-Python教程-PHP中文网

cors错误本质是后端未返回access-control-allow-origin响应头，需用flask-cors（flask）或corsmiddleware（fastapi）正确配置；同时确保后端返回application/json类型且前端显式解析json。

python前后端分离怎么做_vue前端与python后端api跨域交互实战指南

跨域请求被浏览器拦截，控制台报 CORS header 'Access-Control-Allow-Origin' missing，本质是后端没告诉浏览器“允许谁来调我”。不是 Vue 写错了，也不是本地启动方式有问题，纯后端响应头缺失。

Flask 项目别手写 @app.after_request 加头——容易漏掉预检（OPTIONS）请求，用 flask-cors 扩展最稳：pip install flask-cors，然后在应用初始化后加 CORS(app, origins=["http://localhost:5173"])（Vue Vite 默认端口）
FastAPI 更简单，直接用 add_middleware：app.add_middleware(CORSMiddleware, allow_origins=["http://localhost:5173"], allow_credentials=True)；注意 allow_credentials=True 时 allow_origins 不能为 ["*"]，必须写明确地址
开发阶段别在 Vue 端配 proxy 试图绕过——Vite 的 server.proxy 只在开发服务器生效，上线就失效，掩盖真实跨域问题，上线前必然暴露

常见于后端没设对 Content-Type，或前端没正确解析响应体。浏览器不会自动把响应当 JSON 处理，得靠 response.json() 显式解包。

确保后端返回时用了 jsonify()（Flask）或直接返回 dict（FastAPI 自动序列化），且响应头含 Content-Type: application/json；手动 return 字符串 + make_response 容易漏头
Vue 中用 fetch 时必须链式调用 .then(res => res.json())；用 Axios 则默认会 parse，但若后端返回非标准 JSON（比如带 HTML 注释、BOM 头），仍会解析失败
检查后端日志：如果 Vue 报 Unexpected token ，大概率是后端抛了异常，返回了 HTML 格式的 500 页面而非 JSON

Cookie 默认不随跨域请求发送，即使后端已设 SameSite=None; Secure，前端也得主动声明“我要带凭证”。

testing-python

使用pytest编写和评估有效的Python测试。适用于编写测试、审查测试代码、调试测试失败或提高测试覆盖率。

下载

Vue 端所有请求（fetch 或 axios）必须显式开启凭据：fetch 加 { credentials: 'include' }，Axios 配 withCredentials: true
后端设置 Cookie 时，Secure 属性强制要求 HTTPS，开发时若用 http://localhost，必须去掉 Secure（FastAPI 的 response.set_cookie(..., secure=False)，Flask 的 set_cookie(secure=False)）
后端框架对 Cookie 域名校验严格：若前端是 http://localhost:5173，后端设 domain=localhost 可能失败，建议开发期省略 domain 参数，让浏览器按默认规则处理

Vue Router 是 history 模式时，刷新页面会向服务器要真实路径；如果 Nginx 没配置 fallback，就会返回 404，而不是把请求代理给 Python 后端。

Nginx 配置里，/api/ 开头的请求必须 proxy_pass 到 Python 服务（如 http://127.0.0.1:8000），其余路径 fallback 到 index.html：location / { try_files $uri $uri/ /index.html; }
别在 Vue 里把 API 基地址写死成 http://localhost:8000——用相对路径 /api/login，靠 Nginx 统一代理，否则上线后请求会发到用户本地，肯定失败
FastAPI 的 docs（Swagger UI）路径是 /docs，和前端路由冲突，建议上线关掉：app = FastAPI(docs_url=None)

跨域本身不难，难在每个环节都得对齐：后端放行、前端带凭证、反代不丢请求、生产路径不打架。最容易忽略的是开发和生产 Cookie 策略的切换，以及 Nginx 对 /api/ 和 / 的分流逻辑——这里错一点，整个登录态就断了。