解决：前后端跨域请求

关于跨域请求出现的原因

前端地址：http://localhost:5173（Vue 默认端口）

后端地址：http://localhost:8080（常见后端默认端口）

差异点：端口号不同（5173 vs 8080）

结果：浏览器认为二者不同源，触发同源策略限制，导致跨域请求被拦截。

---

同源策略

定义：协议（http/https）、域名（example.com）、端口（:8080）三者完全相同才视为同源。

限制行为：

• 阻止跨域 AJAX/Fetch 请求。
• 限制跨域读取 DOM（如 <iframe> 内容）。
• 限制 Cookie、LocalStorage 的跨域访问。

---

示例（跨域问题）

前端使用vue3 框架书写，启动前端默认端口号是5173，后端默认端口号是8080，这就会导致客户端与服务器之间发送请求时因端口号不同产生跨域问题。

根本原因：浏览器发现请求的源（5173）与目标（8080）端口不一致，且后端未明确允许跨域访问。

---

如何解决跨域请求

未解决前：

---

方法一：配置后端服务器以允许跨域请求（后端）

思路：之前报错是因为不同源（端口号，域名，协议）之间的访问，在后端服务器配置 CORS（跨域资源共享） 规则，允许来自 http://localhost:5173 的请求跨域访问后端接口（运行在 8080 端口）。

---

在spring boot项目中添加一个配置类：CorsConfig

package com.it.heima.ssmp.config;
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 implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {// 允许跨域访问的映射路径，这里表示所有registry.addMapping("/**").allowedOrigins("http://localhost:5173") // 允许前端源// 允许跨域访问的请求方法.allowedMethods("GET", "POST", "PUT", "DELETE")// 允许跨域访问的请求头.allowedHeaders("*")/// 允许跨域访问的响应头.allowCredentials(true);}
}

启动springboot项目，前端vue项目测试结果

---

方法二：使用代理服务器（前端）

思路：

• 前端运行在 http://localhost:5173（开发服务器端口）。
• 当代码中发起 /api/xxx 请求时，代理服务器拦截该请求。
• 代理将请求转发到 http://localhost:8080/api/xxx（后端端口）。
• 浏览器感知不到转发，认为请求仍来自 5173，从而避免跨域错误。

---

一 ，使用ajax发送异步请求时 使用api 替代原本访问后端的端口号

这里的api 表示前端默认端口号5173

// axios.get('http://localhost:8080/user/select')
//使用api替换http://localhost:8080 默认使用前端端口号5173
axios.get('/api/user/select').then(res => {console.log('请求成功')console.log(res.data)userList.value = res.data.data}
).catch(error => {console.log(error)
})

二，在 vite.config.js 文件中 配置跨域

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

启动springboot项目，前端vue项目测试结果