1、什么是跨域

由于浏览器同源策略(同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指,域名,协议,端口相同。),凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。

具体可以查看下表:

6273893470e9481d355d814227e0e9dd.png

2、springboot如何解决跨域问题

1.普通跨域请求解决方案:

①请求接口添加注解@CrossOrigin(origins = "http://127.0.0.1:8020", maxAge = 3600)

说明:origins = "http://127.0.0.1:8020" origins值为当前请求该接口的域

②通用配置(所有接口都允许跨域请求)

新增一个configration类 或 在Application中加入CorsFilter和CorsConfiguration方法

@Configuration

public class CorsConfig {

private CorsConfiguration buildConfig() {

CorsConfiguration corsConfiguration = new CorsConfiguration();

corsConfiguration.addAllowedOrigin("*"); // 1允许任何域名使用

corsConfiguration.addAllowedHeader("*"); // 2允许任何头

corsConfiguration.addAllowedMethod("*"); // 3允许任何方法(post、get等)

return corsConfiguration;

}

@Bean

public CorsFilter corsFilter() {

UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();

source.registerCorsConfiguration("/**", buildConfig()); // 4

return new CorsFilter(source);

}

}

2.ajax自定义headers的跨域请求

$.ajax({

type:"GET",

url:"http://localhost:8766/main/currency/sginInState",

dataType:"JSON",

data:{

uid:userId

},

beforeSend: function (XMLHttpRequest) {

XMLHttpRequest.setRequestHeader("Authorization", access_token);

},

success:function(res){

console.log(res.code)

}

})

695b43b86621c719674838a36a3c31b2.png

原因

浏览器会在发送真正请求之前,先发送一个方法为OPTIONS的预检请求 Preflighted requests 这个请求是用来验证本次请求是否安全的,但是并不是所有请求都会发送,需要符合以下条件:

•请求方法不是GET/HEAD/POST

•POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain

•请求设置了自定义的header字段

对于管理端的接口,我有对接口进行权限校验,每次请求需要在header中携带自定义的字段(token),所以浏览器会多发送一个OPTIONS请求去验证此次请求的安全性。

为何OPTIONS请求是500呢?

OPTIONS请求只会携带自定义的字段,并不会将相应的值带入进去,而后台校验token字段时 token为NULL,所以验证不通过,抛出了一个异常。

那么我们现在来解决这种问题:

① spring boot项目application.yml中添加

spring:

mvc:

dispatch-options-request: true

注意:这种解决方案可能在某些情况下并不能解决OPTIONS问题,原因可能是环境问题,也可能是复杂的自定义filter过滤器配置问题等。

②添加过滤器配置

第一步:手写RequestFilter请求过滤器配置类此类需要实现HandlerInterceptor类,HandlerInterceptor类是org.springframework.web.servlet.HandlerInterceptor下的。

具体代码实现:

@Component

public class RequestFilter implements HandlerInterceptor {

public boolean preHandler(HttpServletRequest request,HttpServletResponse response,Object handler){

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Credentials", "true");

response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");

response.setHeader("Access-Control-Max-Age", "86400");

response.setHeader("Access-Control-Allow-Headers", "Authorization");

// 如果是OPTIONS请求则结束

if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {

response.setStatus(HttpStatus.NO_CONTENT.value());

return false;

}

return true;

}

}

第二步:手写MyWebConfiguration此类需要继承WebMvcConfigurationSupport。

注意:WebMvcConfigurationSupport是2.x版本以上的,1.x版本为WebMvcConfigurerAdapter 。

具体代码实现:

@Component

public class MyWebConfiguration extends WebMvcConfigurationSupport{

@Resource

private RequestFilter requestFilter;

@Override

public void addInterceptors(InterceptorRegistry registry) {

// 跨域拦截器

registry.addInterceptor(requestFilter).addPathPatterns("/**");

}

}

fedf2170894c6169313204e4db5ad3a0.png

总结

以上所述是小编给大家介绍的Springboot解决ajax+自定义headers的跨域请求问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Logo

魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。

更多推荐