java解决跨域问题时的403报错

什么是跨域问题?

当一个请求的url的协议,域名,端口三者之间任意一个与当前页面url不同 即为跨域

问题背景:

如图,前端端口为8090,而后端端口为8099,形成跨域,无法对接

试图利用SpringBoot解决该问题

添加CORS过滤器:新建配置类CorsConfig:创建CorsFilter过滤器,允许跨域

java 复制代码
@Configuration
public class CrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","HEAD","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}
java 复制代码
@Configuration
public class GlobalCorsConfig {

    /**
     * 允许跨域调用的过滤器
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        //允许所有域名进行跨域调用
        config.addAllowedOrigin("*");
        //允许跨越发送cookie
        config.setAllowCredentials(true);
        //放行全部原始头信息
        config.addAllowedHeader("*");
        //允许所有请求方法跨域调用
        config.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

以上两段代码尝试后,均报以下错误:

获取不到token值:

即:后端配置了跨域过滤器,但还是造成了跨域问题

问题解决:

发现vue发起的两遍请求,第二遍不带token

跨域问题从写好跨域过滤器后 本质上就已经解决了,所以无需更改跨域过滤器

更改前端端口号 如下:info仍在报错

一通排查,发现是后端代码问题:

在SecurityConfig中将"/admin/info"添加到白名单中

终于!!

得到最终token

如果还有问题,前后端对照,vue2.0的一个特性是会自动发起info请求,检查后端逻辑代码中是否有接口接收并处理info

相关推荐
葫芦和十三7 小时前
图解 MongoDB 13|WiredTiger 存储引擎:B-tree、页和 checkpoint 三件套
后端·mongodb·agent
葫芦和十三7 小时前
图解 MongoDB 14|Cache 与淘汰:WiredTiger 的内存治理
后端·mongodb·面试
IT_陈寒11 小时前
Vue这个坑我跳了两次,原来问题出在这
前端·人工智能·后端
人活一口气12 小时前
Spring Boot与AIGC的完美结合:从零搭建智能内容生成平台
java·spring boot·aigc
ServBay12 小时前
9 个 Python 第三方库推荐,不用 AI 都好像多出一个团队
后端·python
用户83562907805112 小时前
如何使用 Python 添加和管理 Excel 批注(完整示例)
后端·python
用户83562907805112 小时前
使用 Python 管理 Excel 工作表:创建、复制、删除与重命名
后端·python
lizhongxuan12 小时前
Agent Tool
后端
CaffeinePro13 小时前
依赖注入:FastAPI最核心的解耦能力案例解析
后端·fastapi
Assby14 小时前
从 Function Calling 到 MCP:理解 Agent 工具调用的底层通信机制
人工智能·后端