vue+springboot实现项目的CORS跨域请求


Posted in Javascript onSeptember 05, 2018

跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制。关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解。本文为通过一个小demo对该博客中分析内容的一些验证。

1.springboot+vue项目的构建和启动

细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可。

我的demo里填写用户名和密码,然后点击登录按钮向后台发起登录请求,js代码如下:

methods:{
     login:function() {
      //var userParams = this.$qs.stringify(this.User);
       /* var userParams = JSON.stringify(this.User);*/
       this.$axios.post("http://localhost:8080/login",this.User).then(res=>{
       alert(res.data);
      });
     }
   }

后台控制器部分,对登录请求的处理:

/*CORS设置方法1:@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)*/
  @RequestMapping(value="/login",method = RequestMethod.POST, produces = "application/json;charset=UTF-8" )
  @ResponseBody
  public String userlogin(@RequestBody JSONObject user) {
		/*String name=request.getParameter("name");
		String password=request.getParameter("password");*/
		System.out.println("name: " + user.get("name"));
		System.out.println("password: " + user.get("password"));
		String name = (String) user.get("name");
		String password = (String) user.get("password");
  	if(name.equals("zsz") && password.equals("888888")){ 		
			return "login success!";
		}else{
			return "login failed";
		}
  }

后台以8080端口启动,前台以8081启动,此时无法跨域,浏览器控制台会报错:

vue+springboot实现项目的CORS跨域请求

2.springboot设置CORS

此处主要有两种方法(但是貌似有其他博客还有更多种),在springboot中实现都比较简单(反正springboot好像就是各种省事各种简单)。

方法1:

@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)

直接在控制器方法前注解,设置可以跨域的源ip和端口,以及预检有效期maxAge等参数。

方法2:

编写配置类,配置全局的CORS设置。

@Configuration
public class MyCorsConfig {	
	@Bean
	public WebMvcConfigurer corsConfigurer(){
	 return new WebMvcConfigurerAdapter() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        // 限制了路径和域名的访问
        /*registry.addMapping("/api*").allowedOrigins("http://localhost:8081");*/
       registry.addMapping("/**")
        .allowedOrigins(ALL)
        .allowedMethods(ALL)
        .allowedHeaders(ALL)
        .allowCredentials(true);
      }
    };
	}		
}

如果路径配置成以上的 /**则对所有源路径均接受跨域访问,当然也可以配置更详细的路径。

这样可以成功访问后台,浏览器中可以看到http请求和响应的结果如下图:

vue+springboot实现项目的CORS跨域请求

3.CORS非简单请求预检请求的抓包验证

根据阮一峰大神的博客所述,CORS简单请求只发送一次请求,服务器设置支持CORS则会在响应内容中添加Acess-Control-Allow-Origin等字段,否则不添加,浏览器知道出错,从而抛出异常;CORS非简单请求时,会先进行一次预检(preflight)请求,浏览器根据响应内容进行正式的XMLHttpRequest请求。

在我的demo中,我通过将http请求的 content-type 设置为application/json进行非简单请求。此处要说明一下,axios默认情况下发送请求的格式是application/json而不是我之前用jQuery发送ajax请求的application/x-www-form-urlencoded, 而我之前用的另一种方法构造查询字符串,最终发送请求的content-type会变为application/x-www-form-urlencoded。

var userParams = this.$qs.stringify(this.User)

前台请求代码如本文第一节中所示,在axios请求中直接传入User对象即可。在后端不设置CORS的时候,控制器信息为:

vue+springboot实现项目的CORS跨域请求

协议内容为:

vue+springboot实现项目的CORS跨域请求

而设置了CORS,预检请求结果为:

vue+springboot实现项目的CORS跨域请求

请求成功,并且在响应头中添加了各种字段。

再次发起XHR请求后,结果为:

vue+springboot实现项目的CORS跨域请求

以上实验验证证明了两种CORS请求的过程正如预期。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
用javascript读取xml文件读取节点数据
Aug 12 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
jQuery基于ajax实现星星评论代码
Aug 07 Javascript
javascript函数命名的三种方式及区别介绍
Mar 22 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
详解PHP后期静态绑定分析与应用
Mar 21 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 #jQuery
深入理解Vue 的钩子函数
Sep 05 #Javascript
jQuery实现基本隐藏与显示效果的方法详解
Sep 05 #jQuery
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 #Javascript
You might like
php获取数组中重复数据的两种方法
2013/06/28 PHP
PHP 如何利用phpexcel导入数据库
2013/08/24 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
Win10 下安装配置IIS + MySQL + nginx + php7.1.7
2017/08/04 PHP
Avengerls vs KG BO3 第一场2.18
2021/03/10 DOTA
jquery异步跨域访问代码
2013/06/28 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
详解ajax的data参数错误导致页面崩溃
2018/04/30 Javascript
JavaScript 浏览器对象模型BOM原理与常见用法实例分析
2019/12/16 Javascript
Vue 解决路由过渡动画抖动问题(实例详解)
2020/01/05 Javascript
nginx部署多个vue项目的方法示例
2020/09/06 Javascript
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
python实现用于测试网站访问速率的方法
2015/05/26 Python
Python使用Matplotlib实现Logos设计代码
2017/12/25 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
python绘制无向图度分布曲线示例
2019/11/22 Python
浅谈Python3中print函数的换行
2020/08/05 Python
PyCharm2020.1.1与Python3.7.7的安装教程图文详解
2020/08/07 Python
Django URL参数Template反向解析
2020/11/24 Python
企业党员公开承诺书
2014/03/26 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
2016应届毕业生自荐信范文
2016/01/28 职场文书
五年级数学教学反思
2016/02/16 职场文书
mysql中关键词exists的用法实例详解
2022/06/10 MySQL