Spring Boot 如何优雅的解决 Ajax + 自定义 headers 的跨域请求

- 日理万妓 2021-08-26 15:43 230阅读 0赞

![format_png][]

作者 | implements clan

链接 | cnblogs.com/ukzq/p/10936310.html

**1、什么是跨域**

由于浏览器同源策略（同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。），凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。如果想要更多 Java 相关的技术博文可以本公众号「Java后端」回复「技术博文」获取。

具体可以查看下表：

![format_png 1][]

## **2、Spring Boot如何解决跨域问题** ##

**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)
            }
        })

此时请求http://localhost:8766/main/currency/sginInState接口发现OPTIONS http://localhost:8766/main/currency/sginInState 500错误，普通跨域的解决方案已经无法解决这种问题，为什么会出现OPTIONS请求呢？

![format_png 2][]

## **原因** ##

浏览器会在发送真正请求之前，先发送一个方法为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("/**");
        }
    }

![format_png 3][]

此时我们就完美解决了ajax+自定义headers的跨域请求了，欢迎随时交流学习。

--------------------

\-END-

如果看到这里，说明你喜欢这篇文章，请**转发****、点赞**。微信搜索「web\_resource」，欢迎添加小编微信「focusoncode」，每日朋友圈更新一篇高质量技术博文（无广告）。

**↓扫描二维码添加小编↓**

![format_png 4][]

**推****荐****阅****读**

***1. ***[10 分钟实现 Java 发送邮件功能][10 _ Java]

***2. ***[Spring Boot 线程池的创建][Spring Boot]

***3.*** [Spring Boot 整合 Redis][Spring Boot _ Redis]

***4. ***[2020 年 9 大顶级 Java 框架][2020 _ 9 _ Java]

![format_png 5][]

[format_png]: /images/20210730/c6b4e3e7ef2a4cd2a2d09c8e611113c8.png
[format_png 1]: /images/20210730/6a1447a5f77d43e6b324bf8eeb4f9adb.png
[format_png 2]: /images/20210730/8fd95b21b70d42178dd3c42328dda7c8.png
[format_png 3]: /images/20210730/da1c0a6058884680b2125df42744c539.png
[format_png 4]: /images/20210730/fdaeb15dd77f43d8aac7faba0a353a33.png
[10 _ Java]: https://blog.csdn.net/qq_37217713/article/details/104470973
[Spring Boot]: https://blog.csdn.net/qq_37217713/article/details/104470975
[Spring Boot _ Redis]: https://blog.csdn.net/qq_37217713/article/details/104453971
[2020 _ 9 _ Java]: https://blog.csdn.net/qq_37217713/article/details/104421548
[format_png 5]: /images/20210730/beffe932c4b14c0d80decdd2b1519c7b.png