前后端跨域的解决办法

文章目录

- [1️⃣ CORS（最主流 ✅ 推荐）](#1️⃣ CORS（最主流 ✅ 推荐）)
- - [✔ Spring Boot 实现方式一（推荐）](#✔ Spring Boot 实现方式一（推荐）)
  - [✔ 方式二：@CrossOrigin（简单但不优雅）](#✔ 方式二：@CrossOrigin（简单但不优雅）)
  - [✔ 方式三：Filter（企业常用🔥）](#✔ 方式三：Filter（企业常用🔥）)
- [2️⃣ Nginx 反向代理（生产环境王者 👑）](#2️⃣ Nginx 反向代理（生产环境王者 👑）)
- [3️⃣ 网关解决（微服务架构）](#3️⃣ 网关解决（微服务架构）)

1️⃣ CORS（最主流 ✅ 推荐）

核心思路：

👉 后端加响应头，允许跨域

✔ Spring Boot 实现方式一（推荐）

全局配置：

java 复制代码

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowedOrigins("http://localhost:8080") // 前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")
                .allowCredentials(true) // 允许cookie
                .maxAge(3600);
    }
}

✔ 方式二：@CrossOrigin（简单但不优雅）

java 复制代码

@RestController
@CrossOrigin(origins = "http://localhost:8080")
public class UserController {
}

👉 适合小项目 / 测试

👉 不适合生产（太分散）

✔ 方式三：Filter（企业常用🔥）

java 复制代码

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {

        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");

        chain.doFilter(req, res);
    }
}

👉 优点：统一控制，权限清晰

👉 企业最常见写法

2️⃣ Nginx 反向代理（生产环境王者 👑）

核心思路：

👉 让前端和后端"看起来同源"

复制代码

server {
    listen 80;
    server_name yourdomain.com;

    location /api/ {
        proxy_pass http://localhost:8081/;
    }
}

前端调用：

复制代码

/api/user

👉 浏览器认为：

复制代码

同一个域名 ✔

👉 实际：

复制代码

Nginx帮你转发到后端

🔥 优点：

不用改代码
安全性高
企业必备

3️⃣ 网关解决（微服务架构）

如果你用的是：

👉 Spring Cloud Gateway

配置：

复制代码

spring:
  cloud:
    gateway:
      globalcors:
        corsConfigurations:
          '[/**]':
            allowedOrigins: "http://localhost:8080"
            allowedMethods:
              - GET
              - POST

👉 所有服务统一跨域