为什么出现OPTIONS？SpringBoot接口跨域解决方案

水深无声 2022-12-29 14:21 167阅读 0赞

# 引言 #

前后端分离的项目虽然降低了耦合度，但是引发的各种问题也随之而来。后端项目由Tomcat部署(监听8080端口)，前端项目则部署在Nginx上（监听80、443等非8080端口），前端页面加载速度大大提高了，而当ajax请求后端接口的时候却报错了。

![format_png][]

image

# 同源策略 #

> 同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

前端地址：  
`http://127.0.0.1:63344`

后端地址：  
`http://127.0.0.1:8080`

这两个地址虽然ip地址和协议都一样，但是端口不一样，所以并不满足同源，这样就造成了跨域的问题。

# 解决方案 #

## 配置addCorsMappings ##

新增一个类实现 `WebMvcConfigurer` 接口，然后给这个类加上 `@Configuration` 注解，最后实现 `addCorsMappings` 方法就ok了。

@Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")
                    .maxAge(3600)
                    .allowCredentials(true);
        }
    }

请求正常

![format_png 1][]

image

这就完事了？这么简单的吗？

登陆后台管理看看

![format_png 2][]

image

wtf?

![format_png 3][]

image

## 为何是OPTIONS请求？ ##

按照我的逻辑，上面那个报错的接口应该是一个GET请求，可为什么发的是OPTIONS请求？翻阅各种资料，各种百度google，各种倒腾，各种头疼，最后。。。我掀开了被子，惊奇的发现。。。被窝可真暖和啊！（先睡一觉再说）

![format_png 4][]

image

![format_png 5][]

image

### 原因 ###

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

*  请求方法不是GET/HEAD/POST
 *  POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
 *  请求设置了自定义的header字段

对于管理端的接口，我有对接口进行权限校验，每次请求需要在header中携带自定义的字段（token），所以浏览器会多发送一个OPTIONS请求。

那为什么OPTIONS请求报错了。。。

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

![format_png 6][]

image

## 放行OPTIONS ##

我换了一种解决跨域的方法，使用拦截器解决跨域问题，并且针对OPTIONS请求做放行处理。

新增一个拦截器类 `CorsInterceptor` 实现 `HandlerInterceptor` 接口

@Component
    public class CorsInterceptor implements HandlerInterceptor {
    
        @Override
        public boolean preHandle(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", "*");
    
            // 如果是OPTIONS则结束请求
            if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
                response.setStatus(HttpStatus.NO_CONTENT.value());
                return false;
            }
    
            return true;
        }
    }

需将跨域拦截器放在校验拦截器之上

我把原来的跨域配置 `addCorsMappings` 删除了

@Configuration
    public class WebMvcConfig implements WebMvcConfigurer {
    
        @Resource
        private LoginInterceptor loginInterceptor;
        @Resource
        private CorsInterceptor corsInterceptor;
    
        @Override
        public void addInterceptors(InterceptorRegistry registry) {
            // 跨域拦截器需放在最上面
            registry.addInterceptor(corsInterceptor).addPathPatterns("/**");
            // 校验token的拦截器
            registry.addInterceptor(loginInterceptor).addPathPatterns("/admin/**");
        }
    
    }

OPTIOINS请求没问题了

![format_png 7][]

image

也相继发送了GET请求

![format_png 8][]

image

# 总结 #

晚安！

![format_png 9][]

image

# 补充说明 #

`Access-Control-Allow-Credentials` 响应头表示是否可以将对请求的响应暴露给页面。返回 `true` 则可以，其他值均不可以。Credentials可以是 `cookies, authorization headers` 或 `TLS client certificates`。如果被设置为true，服务器不得设置 `Access-Control-Allow-Origin` 的值为 `*`，需要指定域名，否则当需要发送 `Cookie` 到服务器时，浏览器响应时将会报错。

## 测试 ##

Ajax请求开启 `withCredentials` 属性

xhrFields: {
        withCredentials: true
    }

后端跨域配置不变时，浏览器请求结果报错

![format_png 10][]

image

指定 `Access-Control-Allow-Origin` 的值为 `http://127.0.0.1:63344`，再次请求后正常

![format_png 11][]

image

## 最终配置 ##

@Override
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
            // 此处配置的是允许任意域名跨域请求，可根据需求指定
            response.setHeader("Access-Control-Allow-Origin", request.getHeader("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", "*");
    
            // 如果是OPTIONS则结束请求
            if (HttpMethod.OPTIONS.toString().equals(request.getMethod())) {
                response.setStatus(HttpStatus.NO_CONTENT.value());
                return false;
            }
    
            return true;
        }

# 参考 #

*  [http://levy.work/2016-09-01-why-got-options-request-via-ajax/][http_levy.work_2016-09-01-why-got-options-request-via-ajax]
 *  [https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS\#The\_HTTP\_request\_headers][https_developer.mozilla.org_en-US_docs_Web_HTTP_CORS_The_HTTP_request_headers]
 *  [http://www.ruanyifeng.com/blog/2016/04/cors.html][http_www.ruanyifeng.com_blog_2016_04_cors.html]

作者：AnLingYi  
链接：https://www.jianshu.com/p/5c637bfcc674  
来源：简书  
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[format_png]: /images/20221120/c7d75b978431464f8f7d3042f1c850e0.png
[format_png 1]: /images/20221120/fecfcf781b854ebcbfa7f5ec174bf083.png
[format_png 2]: /images/20221120/282d134f81fb4984affac1c202b18c17.png
[format_png 3]: /images/20221120/75a9fe07ee084c3e93f76852b9d7846e.png
[format_png 4]: /images/20221120/e39c24f35e824570961a8aa5399dae21.png
[format_png 5]: /images/20221120/9c96f88df9c24904917910cfbf514da0.png
[format_png 6]: /images/20221120/b9f7ea810261498c98997ac4425b8023.png
[format_png 7]: /images/20221120/7905fc56dc9d43ee9829967e08b0c96c.png
[format_png 8]: /images/20221120/2d9494167a1441f0972d9638ff4ed99f.png
[format_png 9]: /images/20221120/071e60b315cb40ccafb2ee36c52ca5e3.png
[format_png 10]: /images/20221120/12831112dc774806be2fcf6ef49d648c.png
[format_png 11]: /images/20221120/aa98484b792d444994a7c53f74f6b740.png
[http_levy.work_2016-09-01-why-got-options-request-via-ajax]: https://links.jianshu.com/go?to=http%3A%2F%2Flevy.work%2F2016-09-01-why-got-options-request-via-ajax%2F
[https_developer.mozilla.org_en-US_docs_Web_HTTP_CORS_The_HTTP_request_headers]: https://links.jianshu.com/go?to=https%3A%2F%2Fdeveloper.mozilla.org%2Fen-US%2Fdocs%2FWeb%2FHTTP%2FCORS%23The_HTTP_request_headers
[http_www.ruanyifeng.com_blog_2016_04_cors.html]: https://links.jianshu.com/go?to=http%3A%2F%2Fwww.ruanyifeng.com%2Fblog%2F2016%2F04%2Fcors.html