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 要点归纳(一) jQuery选择器
Mar 21 Javascript
js 控制下拉菜单刷新的方法
Mar 03 Javascript
Javascript Throttle & Debounce应用介绍
Mar 19 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
基于JavaScript代码实现pc与手机之间的跳转
Dec 23 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
Vue一个案例引发的递归组件的使用详解
Nov 15 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为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
php 中htmlentities导致中文无法查询问题
2018/09/10 PHP
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
js打造数组转json函数
2015/01/14 Javascript
jQuery弹出遮罩层效果完整示例
2016/09/13 Javascript
JQuery实现图片轮播效果
2017/05/08 jQuery
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
详解webpack的配置文件entry与output
2017/08/21 Javascript
JavaScript实现微信号随机切换代码
2018/03/09 Javascript
JavaScript 五大常见函数
2018/03/23 Javascript
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
微信小程序实现联动选择器
2019/02/15 Javascript
JS事件绑定的常用方式实例总结
2019/03/02 Javascript
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
python多线程同步实例教程
2019/08/11 Python
python模块常用用法实例详解
2019/10/17 Python
使用Python和OpenCV检测图像中的物体并将物体裁剪下来
2019/10/30 Python
Python3 实现爬取网站下所有URL方式
2020/01/16 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
2013/04/24 HTML / CSS
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
光荣入党自我鉴定
2014/01/22 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
推荐信怎么写
2014/05/09 职场文书
暑假学习心得体会
2014/09/02 职场文书
2014党的群众路线教育实践活动总结报告
2014/10/31 职场文书
2014司机年终工作总结
2014/12/05 职场文书
Python 多线程之threading 模块的使用
2021/04/14 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android