前后端跨域问题

前后端对接的时候，很容易出现跨域问题。从前端和后端都可以解决

前端#

这是典型的跨域（CORS）问题。当浏览器从一个源（Origin）请求资源时，如果目标资源不在同一个源，就会触发 CORS 策略。

解决方案#

方案一：在 Spring Boot 中添加 CORS 配置#

创建一个 CORS 配置类：

package com.lanke.config;

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 implements WebMvcConfigurer {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins("http://localhost:3000") // 允许的前端源
                        .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的 HTTP 方法
                        .allowedHeaders("Content-Type", "Authorization") // 允许的请求头
                        .allowCredentials(true) // 允许携带 Cookie
                        .maxAge(3600); // 预检请求的有效期（秒）
            }
        };
    }
}

方案二：使用注解（适用于特定接口）#

在需要跨域的控制器类或方法上添加 @CrossOrigin 注解：

@RestController
@RequestMapping("/user")
@CrossOrigin(origins = "http://localhost:3000", allowedHeaders = "Authorization")
public class UserController {
    // 接口方法
}

关键配置说明#

配置项	说明
`allowedOrigins`	允许的前端源（如 `http://localhost:3000`），支持 `*` 表示所有源
`allowedMethods`	允许的 HTTP 方法（如 `GET`, `POST`）
`allowedHeaders`	允许的请求头（如 `Content-Type`, `Authorization`）
`allowCredentials`	是否允许携带 Cookie，设为 `true` 时 `allowedOrigins` 不能为 `*`
`maxAge`	预检请求（OPTIONS）的缓存时间，单位秒

前端请求验证#

确保前端在请求中正确设置跨域相关的头信息（例如携带 Authorization）：

// JavaScript 示例（Axios）
axios.post('http://localhost:8080/user/login', {
    username: 'lanke',
    password: '123456'
}, {
    headers: {
        'Authorization': 'Bearer YOUR_TOKEN'
    }
});

常见问题#

预检请求（OPTIONS）：
- 浏览器会先发送 OPTIONS 请求进行预检，确保后端正确响应 200 OK 并包含 Access-Control-Allow-* 头。
- 如果 OPTIONS 请求失败，检查后端是否拦截了该方法。
携带 Cookie：
- 若需携带 Cookie，需同时设置 allowCredentials: true 和 allowedOrigins 为具体源（不能为 *）。
路径匹配：
- 确保 addMapping("/**") 覆盖所有需要跨域的接口路径。

前端与后端的联系#

前端到底是怎么访问到后端 api 呢？主要是依靠我们的 vite.config.ts 中的配置

server: {
            host: '0.0.0.0',
            port: 3000, // 设置默认启动端口为 3000
            open: true,
            proxy: {
                '/api': {
                    target: env.VITE_APP_BASE_API,
                    changeOrigin: true,
                    rewrite: (path) => path.replace(/^\/api/, ''),
                },
            },
        }

我们通过代理配置，将有 /api 有关的链接都拼接成后端的地址，这样我们就能访问成功了。

所以你可以在后端统一使用前缀 /api 也可以自己在前端，把各个接口都进行代理