跨域问题及解决方案

跨域请求问题

跨域请求问题是**浏览器的同源策略（Same-Origin Policy, SOP）**所导致的一种前端限制。

同源

所谓“同源”，是指两个页面的协议（protocol）、域名（host）和端口（port）必须完全相同。

例如：

URL	是否同源	说明
http://example.com/page1	是	与自己比
http://example.com:8080/page1	否	端口不同
https://example.com/page1	否	协议不同
http://api.example.com/page1	否	子域不同

跨域

当浏览器的网页尝试向不同源的服务器发送请求时，就发生了跨域请求，如：

• 当前网页在 http://localhost:8080
• JS 发起 AJAX 请求到 http://api.example.com，此时就是跨域请求

常见跨域行为包括：

• Ajax 请求接口
• 加载第三方脚本、样式、图片（部分不受限制）
• 使用 fetch 获取不同域资源
• WebSocket（需特殊处理）

Spring Boot 中跨域的处理方法

CORS（Cross-Origin Resource Sharing，跨域资源共享） 是一种浏览器与服务器之间的协议，允许浏览器从不同源的服务器安全地请求资源。

CORS 是当前主流的解决跨域请求的方法。Spring Boot中，可以在控制器方法上加注解：

@CrossOrigin(origins = "http://localhost:3000") // 允许来自 localhost:3000 的跨域请求
@GetMapping("/data")
public ResponseEntity<?> getData() {
    return ResponseEntity.ok(...);
}

我们大作业采用的另一种方法是编写全局跨域配置类：

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")  // 改为对所有路径生效
                .allowedOrigins("http://121.36.92.225:9000")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*")  // 允许所有头部
                .allowCredentials(true)
                .maxAge(3600);
    }
}