博客
关于我
Vue+Spring Security前后端交互如何处理跨域请求
阅读量:294 次
发布时间:2019-03-01

本文共 2337 字,大约阅读时间需要 7 分钟。

问题复现

Access to XMLHttpRequest at 'http://localhost:8081/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

在这里插入图片描述

问题原因

出现这个问题的原因就是我的后端没有写好跨域配置,或者说我刚开始不知道跨域如何配置。后端我是用的是Spring boot+Spring Security+Jwt实现的。刚开始我进行了如下配置:

public class AccessControlAllowOriginFilter implements WebMvcConfigurer {       @Override    public void addCorsMappings(CorsRegistry registry) {           registry.addMapping("/**")                .allowedHeaders("Content-Type","X-Requested-With","accept,Origin","Access-Control-Request-Method","Access-Control-Request-Headers","token")                .allowedMethods("PUT", "DELETE", "GET", "POST", "OPTIONS")                .allowedOrigins("*")                .exposedHeaders("access-control-allow-headers",                        "access-control-allow-methods",                        "access-control-allow-origin",                        "access-control-max-age",                        "X-Frame-Options")                .allowCredentials(true);    }}
//解决跨域问题。cors 预检请求放行,让Spring security 放行所有preflight request(cors 预检请求)      http.authorizeRequests().requestMatchers(CorsUtils::isPreFlightRequest).permitAll();

但是请求还是报错,这两种配置确认无效。

解决办法

在前后端交互的过程中,跨域是最基本的问题,后端可以同意进行跨域处理,前端也可以通过代理进行跨域处理。

我这里采用的是在后端配置跨域请求。
在查看了Spring Security官方文档以后找到了正确的跨域请求方法。

查看完官方文档以后我进行了如下配置:

@Bean    CorsConfigurationSource corsConfigurationSource() {           CorsConfiguration configuration = new CorsConfiguration();        configuration.addAllowedOrigin("*");//修改为添加而不是设置,* 最好改为实际的需要,我这是非生产配置,所以粗暴了一点        configuration.addAllowedMethod("*");//修改为添加而不是设置        configuration.addAllowedHeader("*");//这里很重要,起码需要允许 Access-Control-Allow-Origin        configuration.setAllowCredentials(true);        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();        source.registerCorsConfiguration("/**", configuration);        return source;    }

在websecurityconfigure的configure(HttpSecurity http)方法里面还要加上:

http.cors(Customizer.withDefaults());

至此,跨域请求完美解决。

其实跨域请求在第一次请求时浏览器都会先发起一个preflight request,这是要进行如下配置才可以进行跨域访问:

//解决跨域问题。cors 预检请求放行,让Spring security 放行所有preflight request(cors 预检请求)        http.authorizeRequests().requestMatchers(CorsUtils::isPreFlightRequest).permitAll();

有了这些配置前端就可以进行跨域请求了。

转载地址:http://iteo.baihongyu.com/

你可能感兴趣的文章
Mysql学习总结(43)——MySQL主从复制详细配置
查看>>
Mysql学习总结(44)——Linux下如何实现mysql数据库每天自动备份定时备份
查看>>
Mysql学习总结(45)——Mysql视图和事务
查看>>
Mysql学习总结(46)——8种常被忽视的SQL错误用法
查看>>
Mysql学习总结(48)——MySql的日志与备份还原
查看>>
Mysql学习总结(49)——从开发规范、选型、拆分到减压
查看>>
Mysql学习总结(4)——MySql基础知识、存储引擎与常用数据类型
查看>>
Mysql学习总结(50)——Oracle,mysql和SQL Server的区别
查看>>
Mysql学习总结(51)——Linux主机Mysql数据库自动备份
查看>>
Mysql学习总结(52)——最全面的MySQL 索引详解
查看>>
Mysql学习总结(53)——使用MySql开发的Java开发者规范
查看>>
Mysql学习总结(54)——MySQL 集群常用的几种高可用架构方案
查看>>
Mysql学习总结(55)——MySQL 语句大全再温习
查看>>
Mysql学习总结(56)——MySQL用户管理和权限设置
查看>>
Mysql学习总结(57)——MySQL查询当天、本周、本月、上周、本周、上月、距离当前现在6个月数据
查看>>
Mysql学习总结(58)——深入理解Mysql的四种隔离级别
查看>>
Mysql学习总结(59)——数据库分库分表策略总结
查看>>
Mysql学习总结(5)——MySql常用函数大全讲解
查看>>
Mysql学习总结(60)——并发量大、数据量大的互联网业务数据库设计规范总结
查看>>
Mysql学习总结(61)——MySQL优化之DBA级优化整理汇总
查看>>