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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
Prototype源码浅析 String部分(二)
Jan 16 Javascript
javascript history对象(历史记录)使用方法(实现浏览器前进后退)
Jan 07 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
javascript中的try catch异常捕获机制用法分析
Dec 14 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
Bootstrap模态框插件使用详解
May 11 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
js实现消灭星星(web简易版)
Mar 24 Javascript
Vue路由 重定向和别名的区别说明
Sep 09 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
免费手机号码归属地API查询接口和PHP使用实例分享
2014/04/10 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
PHP入门教程之日期与时间操作技巧总结(格式化,验证,获取,转换,计算等)
2016/09/11 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
2013/01/04 Javascript
js实现div闪烁原理及实现代码
2014/06/24 Javascript
Egret引擎开发指南之创建项目
2014/09/03 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
如何利用ES6进行Promise封装总结
2019/02/11 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
Vue v-model组件封装(类似弹窗组件)
2020/01/08 Javascript
JS数组方法reverse()用法实例分析
2020/01/18 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
在vue中实现echarts随窗体变化
2020/07/27 Javascript
用Python编写web API的教程
2015/04/30 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python操作MongoDB数据库的方法示例
2018/01/04 Python
python2.7 安装pip的方法步骤(管用)
2019/05/05 Python
pycharm设置鼠标悬停查看方法设置
2019/07/29 Python
Python传递参数的多种方式(小结)
2019/09/18 Python
Python queue队列原理与应用案例分析
2019/09/27 Python
对django 2.x版本中models.ForeignKey()外键说明介绍
2020/03/30 Python
基于Python的Jenkins的二次开发操作
2020/05/12 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
法国一家多品牌成衣精品中/高档商店:Graduate Store
2019/08/28 全球购物
什么是ARP(Address Resolution Protocol)地址解析协议
2013/10/31 面试题
少先队入队活动方案
2014/02/08 职场文书
经济管理自荐书
2014/06/09 职场文书
2014年帮扶工作总结
2014/11/26 职场文书
国际贸易实训总结
2015/08/03 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书