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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
dojo随手记 gird组件引用
Feb 24 Javascript
处理及遍历XML文档DOM元素属性及方法整理
Aug 23 Javascript
使用jQuery设置disabled属性与移除disabled属性
Aug 21 Javascript
Web表单提交之disabled问题js解决方法
Jan 13 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
jQuery实现复选框的全选和反选
Feb 02 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
vue选项卡切换登录方式小案例
Sep 27 Javascript
Element InputNumber计数器的使用方法
Jul 27 Javascript
JS轻量级函数式编程实现XDM三
Jun 16 Javascript
React自定义hook的方法
Jun 25 Javascript
使用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
十天学会php之第九天
2006/10/09 PHP
php学习之 认清变量的作用范围
2010/01/26 PHP
php中读写文件与读写数据库的效率比较分享
2013/10/19 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
php fread函数使用方法总结
2019/05/28 PHP
学习jquery之一
2007/04/27 Javascript
JavaScript 事件参考手册
2008/12/24 Javascript
JQuery对checkbox操作 (循环获取)
2011/05/20 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
IE中的File域无法清空使用jQuery重设File域
2014/04/24 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
jQuery实现底部浮动窗口效果
2016/09/07 Javascript
基于jQuery实现的幻灯图片切换
2016/12/02 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
基于angular6.0实现的一个组件懒加载功能示例
2018/04/12 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
详解vue-router数据加载与缓存使用总结
2018/10/29 Javascript
JS实现简单移动端鼠标拖拽
2020/07/23 Javascript
解决vue项目运行npm run serve报错的问题
2020/10/26 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
详解Golang 与python中的字符串反转
2017/07/21 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python 二叉树的层序建立与三种遍历实现详解
2019/07/29 Python
wxpython自定义下拉列表框过程图解
2020/02/14 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
Python实现简单的2048小游戏
2021/03/01 Python
美国棒球装备和用品商店:Baseball Savings
2018/06/09 全球购物
自荐信如何“自荐”
2013/10/24 职场文书
求职简历自我评价2015
2015/03/10 职场文书
2015年汽车销售经理工作总结
2015/04/27 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
zabbix配置nginx监控的实现
2022/05/25 Servers