Spring boot 和Vue开发中CORS跨域问题解决


Posted in Javascript onSeptember 05, 2018

跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解。

1. 遇到的问题:

我用spring-boot 做Rest服务,Vue做前端框架,用了element-admin-ui这个框架做后台管理。在调试的过程中遇到了如下错误:

Preflight response is not successful

2. 分析问题

这个问题是典型的CORS跨域问题。

所谓跨域:

跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制。

3. 解决方法

在项目中添加类CustomCORSConfiguration 代码如下:

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;

/**
 * @author spartajet
 * @description
 * @create 2018-05-15 下午5:00
 * @email spartajet.guo@gmail.com
 */
@Configuration
public class CustomCORSConfiguration {
  private CorsConfiguration buildConfig() {
    CorsConfiguration corsConfiguration = new CorsConfiguration();
    corsConfiguration.addAllowedOrigin("*");
    corsConfiguration.addAllowedHeader("*");
    corsConfiguration.addAllowedMethod("*");
    corsConfiguration.setAllowCredentials(true);
    return corsConfiguration;
  }

  @Bean
  public CorsFilter corsFilter() {
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", buildConfig());
    return new CorsFilter(source);
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery text()要注意啦
Oct 30 Javascript
ASP.NET中基于JQUERY的高性能的TreeView补充
Feb 23 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
javascript实现tab切换的四种方法
Nov 05 Javascript
星期几的不同脚本写法(推荐)
Jun 01 Javascript
BOM系列第一篇之定时器setTimeout和setInterval
Aug 17 Javascript
深入理解javascript中的 “this”
Jan 17 Javascript
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
layerUI下的绑定事件实例代码
Aug 17 Javascript
基于javascript的无缝滚动动画1
Aug 07 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
使用jQuery给Table动态增加行、清空table的方法
Sep 05 #jQuery
jQuery常见的遍历DOM操作详解
Sep 05 #jQuery
浅谈react性能优化的方法
Sep 05 #Javascript
angularjs性能优化的方法
Sep 05 #Javascript
jQuery实现获取及设置CSS样式操作详解
Sep 05 #jQuery
在vue中给列表中的奇数行添加class的实现方法
Sep 05 #Javascript
Vue.js 实现数据展示全部和收起功能
Sep 05 #Javascript
You might like
ThinkPHP文件缓存类代码分享
2015/04/22 PHP
Laravel Intervention/image图片处理扩展包的安装、使用与可能遇到的坑详解
2017/11/14 PHP
js的闭包的一个示例说明
2008/11/18 Javascript
JavaScript Event学习第八章 事件的顺序
2010/02/07 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
kmock javascript 单元测试代码
2011/02/06 Javascript
JavaScript 继承使用分析
2011/05/12 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
jQuery CSS()方法改变现有的CSS样式表
2014/09/09 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
利用Javascript开发一个二维周视图日历
2017/12/14 Javascript
vue使用技巧及vue项目中遇到的问题
2018/06/04 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
2018/07/26 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
vue中使用protobuf的过程记录
2018/10/26 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
js实现金山打字通小游戏
2020/07/24 Javascript
javascript实现时间日期的格式化的方法汇总
2020/08/06 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
python显示生日是星期几的方法
2015/05/27 Python
在Python中的Django框架中进行字符串翻译
2015/07/27 Python
python实现录音小程序
2020/10/26 Python
详解Python locals()的陷阱
2019/03/26 Python
Python使用GitPython操作Git版本库的方法
2020/02/29 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
Currentbody澳大利亚:美容仪专家
2019/11/11 全球购物
旅游管理专业个人求职信范文
2013/12/24 职场文书
草船借箭教学反思
2014/02/03 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
购房意向书
2014/08/30 职场文书
机关驾驶员违规检讨书
2014/09/13 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
GoLang中生成UUID唯一标识的实现
2021/05/08 Golang
Python中json.load()和json.loads()有哪些区别
2021/06/07 Python
UNION CREATIVE《Re:从零开始的异世界生活》雷姆手办
2022/03/20 日漫