前后端分离项目如何解决跨域问题

在做前后端分离项目的时候，很多小伙伴第一次遇到跨域问题时都会一脸懵：明明接口在 Apifox 里可以调通，为什么前端一访问就报错？本文带你从零搞懂 跨域问题的原因 和 常见的解决方案，让你不再被 CORS 卡住。

---

一、什么是跨域？

跨域指的是 浏览器 出于安全考虑，禁止网页向不同域名、端口或协议的服务器发起请求。

举个例子：

• 前端页面运行在 http://localhost:5173

• 后端接口运行在 http://localhost:8080

虽然它们都在本机，但端口号不同（5173 ≠ 8080），浏览器就认为是跨域了，所以会拦截请求。

常见报错：

Access to XMLHttpRequest at 'http://localhost:8080/depts' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

这就是典型的 CORS（跨域资源共享）问题。

---

二、为什么 Apifox 能调通？

因为 Apifox / Postman 直接向后端发请求，不受浏览器安全策略限制。只有浏览器里运行的前端代码才会触发 CORS 校验。

所以 后端必须明确告诉浏览器：我允许你访问。

---

三、跨域的解决方案

跨域问题有三种常见解决办法：

1. 后端开启 CORS 支持（推荐）

在 Spring Boot 里加一个配置类，全局允许跨域：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class CorsConfig {@Beanpublic WebMvcConfigurer corsConfigurer() {return new WebMvcConfigurer() {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOriginPatterns("*").allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS").allowedHeaders("*").allowCredentials(true);}};}
}

这样浏览器就不会拦截请求了。

如果只想允许某个前端端口访问，也可以用：

.allowedOrigins("http://localhost:5173")

2. 在 Controller 局部开启跨域

如果不想全局放开，可以在 Controller 上加注解：

@CrossOrigin(origins = "http://localhost:5173")
@RestController
public class DeptController {// ...
}

3. 前端用代理转发请求（Vite / Vue 项目常用）

在 vite.config.js 配置：

server: {proxy: {'/api': {target: 'http://localhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}
}

然后前端请求改为：

axios.get('/api/depts')

这样浏览器看到的请求还是 http://localhost:5173/api/depts，不会触发跨域，而 Vite 会帮你代理转发到后端。

---

四、总结

• 跨域报错 = 浏览器拦截，不是接口有问题。

• 后端可以通过 全局 CORS 配置 或 Controller 注解 放开跨域。

• 前端也可以通过 Vite 代理 解决跨域。

建议新手直接用 方法一（全局配置 CORS） 或 方法三（Vite 代理），简单高效。

这样，不管是前端跑在 5173，后端跑在 8080，都能愉快通信啦 🚀。