如何解决前后端分离开发中，前端携带token的跨域问题?

前面自己在做项目的时候遇到了一个问题。

以前做项目的时候，前端也用的VSCODE，后端用的也是IDEA，因为没有用token，所以当时后端加了@CrossOrigin注解之后就再也没有没有出现跨域问题。前几天自己做项目的时候发现，尽管后端配置了跨域，但是前端如果携带token访问的话，还是会出现跨域不被运行的情况。

像这种：

看一段AI的解释："预配标头"指的是请求发送到服务器时所带的请求头（Request Headers），通常包含一些需要被服务器端检查并根据结果进行处理的信息， 如Cookie、Token等等。如果请求标头显示为“预配标头”，一般是因为这个请求使用了跨域（Cross-Origin Resource Sharing，简称CORS）技术， 在发送请求之前需要服务器端先给出响应，表示是否允许此次跨域请求。此种情况下，浏览器会先发送一个OPTIONS请求，来确认服务器是否支持这个请求， 如果服务器返回允许，则会发送实际的请求。在处理跨域请求时，需要对服务器端进行配置，以允许跨域请求的发送， 具体的方式可以参考CORS的相关资料，或者在代码中使用一些跨域请求工具库来解决。    在前后端分离开发模式中，如果前端没有携带token去请求服务端，服务端只需要加上@CrossOrigin注解就可以直接解决跨域问题， 如果前端携带了请求头token，第一次请求的时候会发送请求方式为OPTIONS的请求，只有后端放行允许访问了，后面携带token的请求才能正常访问。 所以后端放行需要写下面这段代码：         if("OPTIONS".equals(method)) {             filterChain.doFilter(request, response);             return;         }

因为第一次发送的请求方式是OPTIONS，只有这次放行了，后面的请求才会正常通过。 这就是为什么登录请求可以通过，但是查询图书信息却说跨域失败了。因为登录请求没有携带token，所以不需要后端处理，所以直接放行了， 而查询数据的请求携带了token，携带了请求头需要后端处理，但是这里没有允许放行，也就是没有处理，所以后端接收不到前端传递的token。

前端一旦发起需要验证请求头token的请求，就会被拦截下来。但是发起登录请求就不会，因为前端虽然在请求拦截器里面每次请求都把token携带到后端了，但是后端在校验是否是登录请求的时候并没有用到请求头里面的东西。所以直接放行了，也就能登录成功。

但是发送其他异步请求的时候，却被拦截下来了。是因为如果前端发起的请求里面携带了token，并且后端用到了。那么前端发起的第一次请求的方式是“OPTIONS”，只有这一个请求放行了，后面发起的请求才会允许放行。就不会再出现跨域问题了，也就是说，前端控制台报错跨域问题，并不是后端的跨域配置除了问题。而是后端没有给第一次的“OPTIONS”请求放行。

也就是需要在后端的过滤器或者是拦截器里面来处理这一次的“OPTIONS”请求，这里以过滤器为例。需要在过滤器里面加入这段代码：

这段代码的作用就是判断这次请求是不是“OPTIONS”，如果是的话就直接放行。这一次放行了，后面的请求就会正常的被处理了。

这样的话，就不会再有跨域问题了。