手把手教你使用 Spring Boot 3 开发上线一个前后端分离的生产级系统(四) - 日志 & 跨域配置


日志配置

Spring Boot 默认使用的是 Logback 日志实现,会自动读取类路径下的 logback-spring.xml, logback-spring.groovy, logback.xml, 或 logback.groovy 配置文件。

我们在项目 src/resource 下面添加如下内容的日志配置文件 logback-spring.xml 即可:

<?xml version="1.0" encoding="UTF-8"?>

    
    
    
    
    
    

    
    
    
    
        
            
            ${CONSOLE_LOG_PATTERN}
            
            UTF-8
        
    

    
    
    
    

        logs/novel.log
        
        
        
            
            
            logs/debug.%d.%i.log
            
            30
            
                
                10MB
            
        
        
            
            
                %d %p (%file:%line\)- %m%n
            
            
            UTF-8
        
    
    
        
        
            
        
        
        
        
        
            
        
    

    
        
        
            
            
        
        
        
        
        
            
            
        
    

跨域配置

跨域是指浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,都是跨域。在前后端分离的模式下,前后端的域名是不一致的,此时就会发生跨域访问问题。

跨域是出于浏览器的同源策略限制,同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。

我们可以通过前端配置、后端配置或 nginx 配置来解决跨域问题。

如果选择前端配置,我们可以使用 node 中间件 proxy 配置跨域,前端通过 node proxy 来转发我们的接口请求,和浏览器直接打交道的是 node proxy,这样可以避免浏览器的同源策略。配置示例如下:

proxy: {
  '/api': {
    target: 'http://localhost:8888',
    // 请求改变源,此时 nginx 可以获取到真实的请求 ip
    changeOrigin: true
  }
}

如果通过 nginx 配置来解决跨域问题,我们在配置 location 路径转发时需要加上如下的配置:

# 允许的请求头
add_header 'Access-Control-Allow-Methods' 'GET,OPTIONS,POST,PUT,DELETE' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Origin' '$http_origin' always;
add_header Access-Control-Allow-Headers $http_access_control_request_headers;
add_header Access-Control-Max-Age 3600;
# 头转发
proxy_set_header Host $host;
proxy_set_header X-Real-Ip $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_connect_timeout 1000;
proxy_read_timeout 1000;
# 跨域配置
if ($request_method = OPTIONS ) { return 200; }

因为我们项目的侧重点在后端,而且 Spring MVC 提供了跨域解决方案(CORS)的支持。所以我们这里通过后端配置来解决跨域问题。

首先我们需要在 application.yml 配置文件中添加跨域相关的配置:

# 项目配置
novel:
  # 跨域配置
  cors:
    # 允许跨域的域名
    allow-origins:
      - http://localhost:1024
      - http://localhost:8080

然后在io.github.xxyopen.novel.core.config包下创建 CorsProperties 类来绑定 CORS 配置属性:

/**
 * 跨域配置属性
 *
 * @author xiongxiaoyang
 * @date 2022/5/17
 */
@ConfigurationProperties(prefix = "novel.cors")
@Data
public class CorsProperties {

    /**
     * 允许跨域的域名
     * */
    private List allowOrigins;
}

最后在io.github.xxyopen.novel.core.config包下增加如下的 CORS 配置类:

/**
 * 跨域配置
 *
 * @author xiongxiaoyang
 * @date 2022/5/13
 */
@Configuration
@EnableConfigurationProperties(CorsProperties.class)
@RequiredArgsConstructor
public class CorsConfig {

    private final CorsProperties corsProperties;

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 允许的域,不要写*,否则cookie就无法使用了
        for (String allowOrigin : corsProperties.getAllowOrigins()) {
            config.addAllowedOrigin(allowOrigin);
        }
        // 允许的头信息
        config.addAllowedHeader("*");
        // 允许的请求方式
        config.addAllowedMethod("*");
        // 是否允许携带Cookie信息
        config.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource configurationSource = new UrlBasedCorsConfigurationSource();
        // 添加映射路径,拦截一切请求
        configurationSource.registerCorsConfiguration("/**",config);
        return new CorsFilter(configurationSource);
    }
    
}