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()等方法介绍
Nov 18 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
基于jQuery实现页面搜索功能
Mar 26 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
Dec 11 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
学习jQuery中的noConflict()用法
Sep 28 jQuery
微信小程序实现登录注册tab切换效果
Dec 29 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
微信小程序封装多张图片上传api代码实例
Dec 30 Javascript
Ajax异步刷新功能及简单案例
Nov 20 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
点评山进PR-D3L三波段收音机
2021/03/02 无线电
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
简单谈谈favicon
2015/06/10 PHP
javascript编程起步(第五课)
2007/01/10 Javascript
JQuery 图片延迟加载并等比缩放插件
2009/11/09 Javascript
JavaScript的类型简单说明
2010/09/03 Javascript
网易JS面试题与Javascript词法作用域说明
2010/11/09 Javascript
JQuery入门——事件切换之hover()方法应用介绍
2013/02/05 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
javascript实现tab切换的两个实例
2015/11/05 Javascript
jQuery form 表单验证插件(fieldValue)校验表单
2016/01/24 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
Javascript获取图片原始宽度和高度的方法详解
2016/09/20 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
浅谈node模块与npm包管理工具
2018/01/03 Javascript
原生JS进行前后端同构
2018/04/22 Javascript
node.js ws模块搭建websocket服务端的方法示例
2019/04/25 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
详解JavaScript之ES5的继承
2020/07/08 Javascript
[50:45]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第一场
2018/04/10 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
详解python中executemany和序列的使用方法
2017/08/12 Python
Python列表与元组的异同详解
2019/07/02 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
python @classmethod 的使用场合详解
2019/08/23 Python
python+django+rest框架配置创建方法
2019/08/31 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
家长对小学生的评语
2014/01/28 职场文书
大学生入党积极分子党校学习思想汇报
2014/10/25 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
老乡会致辞
2015/07/28 职场文书
idea以任意顺序debug多线程程序的具体用法
2021/08/30 Java/Android