VueJS调用TLS1.2环境SpringBoot接口出现Access-Control-Allow-Origin跨域错误如何解决

问题根因定位 #

• vue.config.js的devServer相关配置仅本地开发阶段生效，部署到线上生产环境后，静态资源服务不会读取该配置，因此之前的两次配置修改均无效。
• 后端CORS配置不匹配：根据报错信息，后端当前返回的Access-Control-Allow-Origin响应头值为https://kpi.mobifone5.vn:8086，与前端实际请求源https://tttkyle.vn不一致，被浏览器CORS安全策略拦截。
• TLS版本差异表现的原因：TLS 1.1环境下浏览器会弱化部分CORS校验规则，或后端针对不同TLS版本返回了不同的CORS响应头，因此切换至TLS 1.1后可正常访问。
• 其他前端框架无异常的原因：大概率是其他框架的请求属于无需预检的简单请求，或对应部署域名已在后端CORS允许列表内；而当前Vue项目的请求携带了自定义请求头、或使用了非简单请求方法，触发了OPTIONS预检请求，因此触发拦截。

解决方案 #

方案1：修改Spring Boot后端CORS配置（优先推荐） #

在Spring Boot项目中新增全局CORS配置，将前端域名加入允许列表，示例代码如下：

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                // 按需添加允许的前端源，生产环境不建议使用通配符*
                .allowedOrigins("https://tttkyle.vn", "https://kpi.mobifone5.vn:8086")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

如果项目集成了Spring Security，还需要在安全配置中放开OPTIONS请求的校验：

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.cors().and()
        .authorizeRequests()
        .antMatchers(HttpMethod.OPTIONS).permitAll()
        // 保留原有其余安全配置
        .anyRequest().authenticated();
}

配置完成后重启后端服务即可生效。

方案2：前端生产环境配置Nginx反向代理 #

如果不方便修改后端配置，可通过Nginx反向代理实现前后端同源，彻底规避跨域问题：

1. 修改前端项目中的API请求前缀，统一替换为/api，例如原请求地址https://tttkyle.vn:8086/KPI/login修改为/api/KPI/login
2. 在前端部署的Nginx配置文件中新增反向代理规则：

location /api/ {
    proxy_pass https://tttkyle.vn:8086/;
    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_set_header X-Forwarded-Proto $scheme;
}

修改完成后重载Nginx配置即可生效。

内容的提问来源于stack exchange，提问作者Mars