0

0

Python后端怎么接前端Vue_前后端分离API联调与跨域配置

P粉602998670

P粉602998670

发布时间:2026-03-11 16:25:02

|

435人浏览过

|

来源于php中文网

原创

cors错误需先确认预检请求是否被后端正确响应:带自定义header或非标准content-type会触发options请求,后端必须返回200及access-control-allow-origin等头;django需精确配置cors_allowed_origins,flask需显式支持options方法;vue代理仅限开发环境,路径重写和请求前缀必须匹配;后端应统一响应格式,前端需适配字段级错误结构;cookie认证须前后端同时配置withcredentials和access-control-allow-credentials:true且origin不能为*。

python后端怎么接前端vue_前后端分离api联调与跨域配置

Vue 发请求被浏览器拦住:CORS 错误怎么快速定位

前端报 CORS policy: No 'Access-Control-Allow-Origin' header,不是后端没写接口,是浏览器在发 OPTIONS 预检请求时被拒了。Vue 调用 axios.postfetch 时只要带自定义 header(比如 Authorization)、或 Content-Type 不是 application/x-www-form-urlencodedmultipart/form-datatext/plain 中的任一个,就会触发预检——这时候后端必须响应 OPTIONS 请求,且返回正确的 CORS 头。

  • 先用 curl 模拟预检:curl -X OPTIONS -H "Origin: http://localhost:5173" -H "Access-Control-Request-Method: POST" -I http://127.0.0.1:8000/api/login,看是否返回 200 和 Access-Control-Allow-Origin
  • Django 用户别只依赖 djangorestframework-cors-headers,确认 CORS_ALLOW_ALL_ORIGINS = False 时,CORS_ALLOWED_ORIGINS 必须精确匹配前端地址(http://localhost:5173,不能漏协议或端口)
  • Flask 用户慎用 @cross_origin() 装饰单个路由——它默认不处理 OPTIONS,得手动加 methods=["GET", "POST", "OPTIONS"],或直接用 flask-cors 全局注册

Vue 开发服务器代理失效:为什么 /api 转发没走通

Vue CLI 或 Vite 的 proxy 是开发阶段用的,本质是本地 dev server 做反向代理,不解决生产跨域,也不影响后端真实部署行为。失效常见于路径重写规则写错、代理目标未启动、或 Vue 请求 URL 没走代理配置的前缀。

  • Vite 中 vite.config.tsserver.proxy 写法:"/api": { target: "http://127.0.0.1:8000", changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, "") }——注意 rewrite 是必须的,否则后端收不到 /login,而是收到 /api/login
  • Vue 请求必须以 /api 开头,比如 axios.get("/api/users");写成 axios.get("http://127.0.0.1:8000/api/users") 就绕过代理,直连后端,跨域照常发生
  • 代理只在 vite dev 下生效,build 后的静态文件部署到 Nginx,就得靠 Nginx 配置 location /api { proxy_pass http://backend; },和前端代码无关

后端返回数据格式对不上:Vue 解析 400/500 响应体失败

Vue 默认把非 2xx 响应当成错误,进 catch,但很多 Python 后端(尤其 Django REST Framework)在验证失败时返回 400 + JSON body,而前端如果只读 error.response.data 却没检查结构,容易报 Cannot read property 'message' of undefined

一帧秒创
一帧秒创

基于秒创AIGC引擎的AI内容生成平台,图文转视频,无需剪辑,一键成片,零门槛创作视频。

下载
  • Django REST Framework 默认验证错误返回类似 {"email": ["Enter a valid email address."]},不是扁平的 {message: "..."} ,前端要适配字段级结构,别硬取 err.message
  • FastAPI 默认 422 错误返回 detail 字段,内容是 list,比如 [{"loc":["body","age"],"msg":"field required","type":"value_error.missing"}],需遍历解析,不能当字符串 alert
  • 统一响应包装很重要:Python 后端建议所有接口都走同一响应格式(如 {"code": 0, "data": {}, "msg": ""}),避免前端反复判断 if (res.data.detail) 这类分支

Cookie 登录态传不过去:withCredentials 怎么配才生效

Vue 调用需要登录态的接口时,如果后端用 Session/Cookie 认证,必须显式开启凭证传递,否则浏览器根本不会发 Cookie,后端也拿不到 sessionid

立即学习Python免费学习笔记(深入)”;

  • axios 要设 withCredentials: true(全局或单次请求),Vue 项目里通常在 main.ts 配置:axios.defaults.withCredentials = true
  • 后端 CORS 响应头必须包含 Access-Control-Allow-Credentials: true,且此时 Access-Control-Allow-Origin 不能为 *,必须指定具体域名,比如 http://localhost:5173
  • Django 用户注意:还要开 SESSION_COOKIE_SAMESITE = NoneSESSION_COOKIE_SECURE = True(HTTPS 环境下),开发时若用 HTTP,得设 SESSION_COOKIE_SECURE = False,否则浏览器拒绝发送 Cookie

跨域问题真正麻烦的从来不是配一行 CORS,而是前后端对“谁该处理预检”“谁该携带凭证”“错误体长什么样”的隐含假设不一致。多抓几次浏览器 Network 里的请求头和响应头,比查文档更快定位卡点。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
nginx 重启
nginx 重启

nginx重启对于网站的运维来说是非常重要的,根据不同的需求,可以选择简单重启、平滑重启或定时重启等方式。本专题为大家提供nginx重启的相关的文章、下载、课程内容,供大家免费下载体验。

246

2023.07.27

nginx 配置详解
nginx 配置详解

Nginx的配置是指设置和调整Nginx服务器的行为和功能的过程。通过配置文件,可以定义虚拟主机、HTTP请求处理、反向代理、缓存和负载均衡等功能。Nginx的配置语法简洁而强大,允许管理员根据自己的需要进行灵活的调整。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

522

2023.08.04

nginx配置详解
nginx配置详解

NGINX与其他服务类似,因为它具有以特定格式编写的基于文本的配置文件。本专题为大家提供nginx配置相关的文章,大家可以免费学习。

610

2023.08.04

tomcat和nginx有哪些区别
tomcat和nginx有哪些区别

tomcat和nginx的区别:1、应用领域;2、性能;3、功能;4、配置;5、安全性;6、扩展性;7、部署复杂性;8、社区支持;9、成本;10、日志管理。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

244

2024.02.23

nginx报404怎么解决
nginx报404怎么解决

当访问 nginx 网页服务器时遇到 404 错误,表明服务器无法找到请求资源,可以通过以下步骤解决:1. 检查文件是否存在且路径正确;2. 检查文件权限并更改为 644 或 755;3. 检查 nginx 配置,确保根目录设置正确、没有冲突配置等等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

693

2024.07.09

Nginx报404错误解决方法
Nginx报404错误解决方法

解决方法:只需要加上这段配置:try_files $uri $uri/ /index.html;即可。想了解更多Nginx的相关内容,可以阅读本专题下面的文章。

3618

2024.08.07

nginx部署php项目教程汇总
nginx部署php项目教程汇总

本专题整合了nginx部署php项目教程汇总,阅读专题下面的文章了解更多详细内容。

54

2026.01.13

nginx配置文件详细教程
nginx配置文件详细教程

本专题整合了nginx配置文件相关教程详细汇总,阅读专题下面的文章了解更多详细内容。

71

2026.01.13

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
最新Python教程 从入门到精通
最新Python教程 从入门到精通

共4课时 | 22.5万人学习

Django 教程
Django 教程

共28课时 | 4.9万人学习

SciPy 教程
SciPy 教程

共10课时 | 1.9万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号