讲师中心 微信公众号
AI工具推荐 视频效率加速

如何搭建Java的前后端分离环境_Vue跨域代理与后端对接配置

陌辰小哥_7069

陌辰小哥_7069

发布时间:2026-03-18 14:02:03

|

185人浏览过

|

来源于php中文网

原创

Vue CLI devServer.proxy需在vue.config.js顶层配置,target必须带http://协议,路径匹配用^/api锚定,并用pathRewrite去除前缀;Nginx部署时需配置location /api/反向代理;后端CORS需显式允许前端端口并处理credentials。

如何搭建java的前后端分离环境_vue跨域代理与后端对接配置

Vue CLI 的 devServer.proxy 怎么写才不 404

代理配置写错,前端发请求直接 404 或返回 HTML 页面,不是后端接口响应。根本原因是路径重写没对齐、目标地址没带协议、或代理规则被 Vue Router history 模式干扰。

实操建议:

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

java-api-doc-generator
java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码,自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载
  • devServer.proxy 必须写在 vue.config.js 顶层,不是 configureWebpack 里
  • 目标地址(target)必须带 http:// 或 https://,比如 http://localhost:8080,漏了协议会静默失败
  • 路径匹配要加 ^/api 开头锚定,避免 /api/user 被误匹配成 /apisomething
  • 后端接口实际路径是 /user/list,但前端调用 /api/user/list,那就要用 pathRewrite: { '^/api': '' } 去掉前缀
module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

Java 后端为什么收不到 Origin 头、CORS 报错

Vue 代理生效后,浏览器发的是 http://localhost:8080/api/user 请求,但后端没配 CORS,或者只放行了 http://localhost:8080 却没放行 http://localhost:8081(Vue 默认端口),结果预检请求(OPTIONS)被拒,控制台报 No 'Access-Control-Allow-Origin' header。

实操建议:

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

  • Spring Boot 项目优先用 @CrossOrigin 注解,加在 Controller 类或方法上,比全局配置更可控
  • 如果用全局配置,确认 WebMvcConfigurer 中的 addCorsMappings 方法里,allowedOrigins 包含 http://localhost:8081(Vue 端口),别只写 * —— 它不支持带凭证(cookie)的请求
  • 若需传 cookie,前后端都要设:前端 axios.defaults.withCredentials = true,后端 allowedOrigins 不能为 *,且必须显式设置 allowCredentials(true)

打包后部署到 Nginx,API 请求变成 404 怎么修

开发时靠 Vue CLI 代理没问题,但 npm run build 后静态资源扔进 Nginx,代理就失效了。此时所有 /api 请求都由 Nginx 直接处理,而它根本不知道该转给谁,自然 404。

实操建议:

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

  • 前端请求地址别写死 http://localhost:8080/api,统一用相对路径,如 /api/user
  • Nginx 配置里加 location 块,把 /api 开头的请求反向代理到 Java 后端:
    location /api/ {
      proxy_pass http://127.0.0.1:8080/;
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
    }
  • 注意 proxy_pass 末尾的 /:有它会剥离 /api/ 前缀;没它会原样转发,后端得监听 /api/**

Java 后端接口返回 JSON,但前端拿到的是乱码或空白

常见于 Spring Boot 返回中文字段时,响应头没设 Content-Type: application/json;charset=UTF-8,浏览器按 ISO-8859-1 解析,中文全变 。

实操建议:

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

  • 检查 Controller 方法是否用了 @ResponseBody 或 @RestController,否则 Spring 不自动序列化
  • 确保 application.properties 里有:
    spring.http.encoding.charset=UTF-8
    spring.http.encoding.force=true
    spring.http.encoding.enabled=true
  • 如果用 Jackson,确认没有手动 new ObjectMapper 并忽略字符集设置;默认 Spring Boot 的 MappingJackson2HttpMessageConverter 已配 UTF-8
跨域和代理问题容易卡在“看起来通了但数据不对”,比如代理转发成功却漏了 header,或 CORS 允许了 origin 却没允许 content-type。这些细节不打日志很难发现,建议后端加一行 log 打印收到的请求路径和 header,比猜快得多。

热门AI工具

更多
豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2703

2023.08.11

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6850

2024.03.19

后端的主要工作内容介绍
后端的主要工作内容介绍

后端是应用程序的服务端部分,负责核心任务,如数据库交互、业务逻辑处理和响应客户端请求。想了解更多后端的相关内容,可以阅读本专题下面的文章。

6306

2024.03.19

java
java

Java是一个通用术语,用于表示Java软件及其组件,包括“Java运行时环境 (JRE)”、“Java虚拟机 (JVM)”以及“插件”。php中文网还为大家带了Java相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

11457

2023.06.15

java正则表达式语法
java正则表达式语法

java正则表达式语法是一种模式匹配工具,它非常有用,可以在处理文本和字符串时快速地查找、替换、验证和提取特定的模式和数据。本专题提供java正则表达式语法的相关文章、下载和专题,供大家免费下载体验。

8562

2023.07.05

java自学难吗
java自学难吗

Java自学并不难。Java语言相对于其他一些编程语言而言,有着较为简洁和易读的语法,本专题为大家提供java自学难吗相关的文章,大家可以免费体验。

7372

2023.07.31

java配置jdk环境变量
java配置jdk环境变量

Java是一种广泛使用的高级编程语言,用于开发各种类型的应用程序。为了能够在计算机上正确运行和编译Java代码,需要正确配置Java Development Kit(JDK)环境变量。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

1224

2023.08.01

java保留两位小数
java保留两位小数

Java是一种广泛应用于编程领域的高级编程语言。在Java中,保留两位小数是指在进行数值计算或输出时,限制小数部分只有两位有效数字,并将多余的位数进行四舍五入或截取。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

988

2023.08.02

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

40

2026.10.28

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
dev.java 官方:Learn Java
dev.java 官方:Learn Java

共0课时 | 0人学习

Java JDBC数据库连接官方教程
Java JDBC数据库连接官方教程

共0课时 | 0人学习

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

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn