JavaWeb开发如何解决跨域问题

跨域的本质：浏览器的同源策略

跨域根本不是后端的问题，而是浏览器为了安全强制实施的同源策略。

同源三要素：协议 + 域名 + 端口 三者完全一致
只要有一个不同，浏览器就会拦截跨域请求的响应结果（注意：请求其实已经发到服务器了）
服务器之间的调用不受同源策略限制

JavaWeb 4 种主流解决方案（按推荐度排序）

🚀 方案 1：CORS（W3C 标准，生产首选）

原理：通过服务器添加响应头，明确告诉浏览器 "允许哪些源访问我"，是目前最标准、最通用的跨域解决方案。

SpringBoot 3 种实现方式：

1.局部注解（快速测试）

// 加在Controller类或方法上
@CrossOrigin(origins = "http://localhost:8080", allowCredentials = "true", maxAge = 3600)
@RestController
public class UserController {}

2.全局配置（推荐，统一管理）

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8080")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

3.过滤器配置（最灵活，兼容旧版本，生产推荐）

核心代码见下文 "生产级核心代码" 部分

🌐 方案 2：Nginx 反向代理（生产多服务场景首选）

原理：让 Nginx 作为统一入口，把前端和后端请求都代理到同一个域名端口下，从浏览器视角看就是同源的，从根本上避免跨域。

Nginx 核心配置：

server {
    listen 80;
    server_name localhost;

    # 前端静态资源
    location / {
        root /usr/share/nginx/html;
        index index.html;
    }

    # 后端API代理
    location /api/ {
        proxy_pass http://localhost:9090/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

✅ 优点：无需修改任何业务代码，统一处理所有后端服务的跨域

🛠️ 方案 3：前端开发代理（仅开发环境）

原理：前端框架（Vue/React）内置的代理服务器，开发环境下把 API 请求转发到后端，绕过浏览器同源策略。

Vue3 vite.config.js 示例：

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

⚠️ 注意：只在开发环境生效，生产环境必须用 CORS 或 Nginx

⚠️ 方案 4：JSONP（历史方案，了解即可）

原理：利用