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下操作HTML控件的实现代码
Jan 12 Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 Javascript
JavaScript代码判断点击第几个按钮
Dec 13 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
JS验证不重复验证码
Feb 10 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 Javascript
vue项目创建步骤及路由router
Jan 14 Javascript
React.js组件实现拖拽排序组件功能过程解析
Apr 27 Javascript
vue实现评价星星功能
Jun 30 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
JavaScript实现队列结构过程
Dec 06 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 数组和字符串互相转换实现方法
2013/03/26 PHP
Apache实现Web Server负载均衡详解(不考虑Session版)
2013/07/05 PHP
ThinkPHP的Widget扩展实例
2014/06/19 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
jquery实现的代替传统checkbox样式插件
2015/06/19 Javascript
JS iFrame加载慢怎么解决
2016/05/13 Javascript
Laravel中常见的错误与解决方法小结
2016/08/30 Javascript
node koa2实现上传图片并且同步上传到七牛云存储
2017/07/31 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
Vue 源码分析之 Observer实现过程
2018/03/29 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
基于windows下pip安装python模块时报错总结
2018/06/12 Python
python制作简单五子棋游戏
2019/06/18 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python实现代码统计程序
2019/09/19 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python程序控制语句用法实例分析
2020/01/14 Python
python实现logistic分类算法代码
2020/02/28 Python
python 函数嵌套及多函数共同运行知识点讲解
2020/03/03 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
村捐赠仪式答谢词
2014/01/21 职场文书
《胡杨》教学反思
2014/02/16 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
三月学雷锋活动总结
2014/06/26 职场文书
旗帜观后感
2015/06/08 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
CSS控制继承中的height能变为可继承吗
2022/06/10 HTML / CSS