跨域解析：破解 SPRINGBOOT 和 NGINX 中的难题

2023-10-24 11:25:29

跨域资源共享 (CORS)：让不同源网站无缝交互

在现代网络开发中，跨源资源共享 (CORS) 扮演着至关重要的角色，它允许来自不同源的网站安全地进行数据交互。本文将深入探讨 CORS，了解其工作原理、在 Springboot 和 Nginx 中的配置方式，并解答一些常见的跨域问题。

跨源资源共享 (CORS) 定义

CORS 是一种基于 HTTP 头的机制，解决了浏览器在从不同源网站获取资源时遇到的安全限制。当浏览器尝试从源 A（例如 https://example.com）向源 B（例如 https://api.example.com）发送请求时，如果这两个源不相同，浏览器就会触发 CORS 预检请求。

预检请求使用 OPTIONS 方法，旨在询问源 B 是否允许跨源请求。服务器响应预检请求，指示浏览器是否允许跨源请求，以及允许哪些请求方法和标头。

CORS 工作原理

当浏览器收到允许跨源请求的响应后，它会发送实际的跨源请求。服务器响应实际请求，并包括允许跨域的 HTTP 头，例如 Access-Control-Allow-Origin。浏览器在接收到此响应后，就可以读取和使用资源，而不会遇到任何跨域限制。

Springboot 中的 CORS 配置

在 Springboot 中配置 CORS 非常简单，可以使用 @CrossOrigin 注解或实现 WebMvcConfigurer 接口。

使用 @CrossOrigin 注解

使用 @CrossOrigin 注解可以为单个控制器或方法启用 CORS。例如：

@CrossOrigin(origins = "https://example.com")
public class MyController {
    // 控制器方法
}

使用 WebMvcConfigurer 接口

通过实现 WebMvcConfigurer 接口，可以全局配置 CORS。例如：

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .maxAge(3600);
    }
}

Nginx 中的 CORS 配置

在 Nginx 中配置 CORS 需要在配置文件中添加以下配置：

location / {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET, POST, PUT, DELETE, OPTIONS;
    add_header Access-Control-Allow-Headers Content-Type, Authorization;
    add_header Access-Control-Max-Age 3600;
}