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 相关文章推荐
JS模拟多线程
Feb 07 Javascript
监控 url fragment变化的js代码
Apr 19 Javascript
使用jquery写个更改表格行顺序的小功能
Apr 29 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
May 01 Javascript
JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】
Aug 23 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
JS 实现计算器详解及实例代码(一)
Jan 08 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
浅谈webpack 构建性能优化策略小结
Jun 13 Javascript
详解关于vue2.0工程发布上线操作步骤
Sep 27 Javascript
详解nuxt路由鉴权(express模板)
Nov 21 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 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中使用$_REQUEST需要注意的一个问题
2013/05/02 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
学习php设计模式 php实现享元模式(flyweight)
2015/12/07 PHP
php提取微信账单的有效信息
2018/10/01 PHP
js实现iframe动态调整高度的代码
2008/01/06 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
JavaScript编写带旋转+线条干扰的验证码脚本实例
2016/05/30 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
React Native中TabBarIOS的简单使用方法示例
2017/10/13 Javascript
JS中Promise函数then的奥秘探究
2018/07/30 Javascript
koa-router路由参数和前端路由的结合详解
2019/05/19 Javascript
微信小程序引入VANT组件的方法步骤
2019/09/19 Javascript
[03:42]2014DOTA2国际邀请赛 第三日比赛排位扑朔迷离
2014/07/12 DOTA
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python标准库os.path包、glob包使用实例
2014/11/25 Python
Python中datetime模块参考手册
2017/01/13 Python
Python操作excel的方法总结(xlrd、xlwt、openpyxl)
2019/09/02 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
python GUI库图形界面开发之PyQt5表格控件QTableView详细使用方法与实例
2020/03/01 Python
pyecharts在数据可视化中的应用详解
2020/06/08 Python
Python持续监听文件变化代码实例
2020/07/22 Python
使用django自带的user做外键的方法
2020/11/30 Python
python中pyqtgraph知识点总结
2021/01/26 Python
澳大利亚儿童和婴儿产品在线商店:Lime Tree Kids
2017/10/05 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
汇源肾宝广告词
2014/03/20 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
离职报告格式
2014/11/04 职场文书
结婚仪式主持词
2015/06/29 职场文书
小学中队长竞选稿
2015/11/20 职场文书
Python进程间的通信之语法学习
2022/04/11 Python