前后端分离项目SpringSecurity整合token遇到的跨域问题

最新推荐文章于 2025-03-21 19:48:13 发布

原创

最新推荐文章于 2025-03-21 19:48:13 发布 · 493 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #spring boot

文章讲述了在前后端分离项目中遇到的跨域问题，包括如何通过后端配置解决基本跨域，以及在处理需要token验证的资源时遇到的问题，最后揭示了OPTIONS请求的作用和响应头设置的重要性。

记录一下做前后端分离项目因为跨域踩得大坑

跨域问题的产生

发起登录请求（不需要携带token）

第一步解决方法

第一步解决方法遇到的问题（访问需要携带token验证的资源）

什么是OPTIONS请求？

发现问题（只发起了一次options请求）

解决方法

后续问题（不响应Json数据）

解决方法

跨域问题的产生

简单来说就是开发过程中前后端端口不同（自己做项目常见），域名不同等

如：vue项目端口号8080，后端端口8088。此时就会产生跨域问题

发起登录请求（不需要携带token）

控制台打印跨域信息

很明显时跨域的问题

第一步解决方法

后端配置跨域，加一个WebConfig配置类即可解决大部分跨域问题

package com.xiaotan.oldservice.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.util.List;

//解决前端跨域问题写的配置类
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")