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 相关文章推荐
javascript定时保存表单数据的代码
Mar 17 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
弹出遮罩层后禁止滚动效果【实现代码】
Apr 29 Javascript
javascript显示倒计时控制按钮的简单实现
Jun 07 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
基于jQuery实现照片墙自动播放特效
Jan 12 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 Javascript
js操作二进制数据方法
Mar 03 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
Feb 20 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 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
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
JavaScript 继承详解(五)
2016/10/11 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
2017/05/17 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
vue component组件使用方法详解
2017/07/14 Javascript
vue.js移动数组位置,同时更新视图的方法
2018/03/08 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
JavaScript常用工具方法封装
2019/02/12 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
jquery实现进度条状态展示
2020/03/26 jQuery
解决vue项目router切换太慢问题
2020/07/19 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Pyqt5 基本界面组件之inputDialog的使用
2019/06/25 Python
PyQt5中向单元格添加控件的方法示例
2020/03/24 Python
Python学习笔记之装饰器
2020/08/06 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
Lookfantastic澳大利亚官网:英国知名美妆购物网站
2021/01/07 全球购物
AJAX都有哪些有点和缺点
2012/11/03 面试题
婚前保证书
2014/04/29 职场文书
小学校园之星事迹材料
2014/05/16 职场文书
消防志愿者活动方案
2014/08/23 职场文书
高一军训的心得体会
2014/09/01 职场文书
讲文明知礼仪演讲稿
2014/09/13 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
2016党员三严三实心得体会
2016/01/15 职场文书
使用canvas实现雪花飘动效果的示例代码
2021/03/30 HTML / CSS
JavaScript如何优化逻辑判断代码详解
2021/06/08 Javascript
以下牛机,你有几个
2022/04/05 无线电