这个跨域问题….得多看一会儿才能解决

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

前言：今天在搭建项目的时候实现前后分离，前端是VUE我用的是nginx使本地磁盘作为一个服务，后端用的是SpingBoot在服务器上使用jar包启动的项目，问题是这样的：前端可以访问后端放行的接口，然后需要权限的接口访问时会报跨域的异常。

具体提现：由于后端设置了权限，则需要用户登录了且当前的用户token权限含有权限才能访问接口。然而在后端拦截的时候发现请求头中没有携带token，则是非法请求。我查看了前端的打印以及请求里面含有相应的token，在请求的时候浏览器还会向此后端接口发送一个OPTIONS请求此请求中没有token信息，后端日志打印的token值为null抛出了异常。因而在没有添加到拦截器之前上述问题都是不存在的，都是正常的，所以都不用考虑是前端问题，问题肯定出在后端，准确的说是拦截器。

了解问题原理：在CROS复杂请求时会首先发送一个OPTIONS请求做嗅探，来测试服务器是否支持本次请求，请求成功后才会发送真实的请求。OPTIONS请求不会携带任何数据，导致这个请求不符合我们拦截器的校验规则被拦截了，就会直接返回。响应头中也没携带解决跨域需要的头部信息，进而出现了跨域问题。因此我们在浏览器中会发现请求没有携带token，后端日志中token为null。

解决

OPTIONS请求的解决

我们可以在后端对于OPTIONS请求直接放行

//判断此次请求是否为OPTIONS请求，如果是则直接放行
if("OPTIONS".equals(httpServletRequest.getMethod().toUpperCase())) {
      return true;
}
复制代码

请求受拦截后token为空解决

在此我们就需要之前讲解到的拦截器Filter来实现

package com.wzy.member.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class MyCorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        config.addAllowedOrigin("*");
        config.setAllowCredentials(true);
        config.addAllowedMethod("*");
        config.addAllowedHeader("*");
        config.addExposedHeader("token");
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        configSource.registerCorsConfiguration("/**", config);
        return new CorsFilter(configSource);
    }
}
复制代码

这样我们就大功告成了

这是我在工作中遇到了这个问题 小伙伴们有没有遇到过有关跨域得其他问题 可以在评论区留言哦！