在软件开发中,经常会遇到跨域问题,这个问题比较头疼,今天主要介绍下遇到的跨域问题解决思路及如何解决?
1、首先是后端跨域问题
spring boot中的跨域配置如下:
@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配置如下:
client_max_body_size 100m;
// 默认nginx上传文件大小限制是1M
3、调用后端接口的OPTIONS(预检)请求
在某些情况下,如果你的nginx需要配置options接口,这个接口是后端没有的,是一个默认的请求,对应的nginx配置
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;
}