跨域问题解决实践

智慧源点2025-04-14 10:30

在软件开发中，经常会遇到跨域问题，这个问题比较头疼，今天主要介绍下遇到的跨域问题解决思路及如何解决？

1、首先是后端跨域问题

spring boot中的跨域配置如下：

less 复制代码

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addInterceptors(InterceptorRegistry registry) {
    }

    @Override
    public void addFormatters(FormatterRegistry registry) {
//        registry.addConverter(new LongDateConverter());
    }

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**") // 所有接口
                .allowCredentials(true) // 是否发送 Cookie
                .allowedOriginPatterns("*") // 支持域
                .allowedMethods("GET", "POST", "PUT", "DELETE") // 支持方法
                .allowedHeaders("*")
                .exposedHeaders("*");
    }
}

2、根据http返回状态值判断

查看nginx日志，根据返回状态排查问题。例如：上传文件调用后端接口返回413，标识请求体过大导致跨域，nginx配置如下：

arduino 复制代码

client_max_body_size 100m;
// 默认nginx上传文件大小限制是1M

3、调用后端接口的OPTIONS（预检）请求

在某些情况下，如果你的nginx需要配置options接口，这个接口是后端没有的，是一个默认的请求，对应的nginx配置

ini 复制代码

location / {
            # if ($request_method = 'OPTIONS'){
                  add_header Access-Control-Allow-Origin *;
                  add_header Access-Control-Allow-Methods 'POST, GET, OPTIONS, DELETE';
                  add_header Access-Control-Max-Age "3600";
                  add_header Access-Control-Allow-Credentials true;
                  add_header Access-Control-Allow-Headers *;
                  add_header Content-Type 'application/json; charset=utf-8';
                  return 204;
             }
           # proxy_pass http://127.0.0.1:8115; 
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        }