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 相关文章推荐
解放web程序员的输入验证
Oct 06 Javascript
lib.utf.js
Aug 21 Javascript
js 新浪的一个图片播放图片轮换效果代码
Jul 15 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
固定网页背景图同时保持图片比例的思路代码
Aug 15 Javascript
Jquery全选与反选点击执行一次的解决方案
Aug 14 Javascript
JS & JQuery 动态添加 select option
Jun 08 Javascript
通过jsonp获取json数据实现AJAX跨域请求
Jan 22 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
Vue中多元素过渡特效的解决方案
Feb 05 Javascript
JS实现随机点名器
Apr 12 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
用libTemplate实现静态网页的生成
2006/10/09 PHP
PHP 日常开发小技巧
2009/09/23 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
推荐一本PHP程序猿都应该拜读的书
2014/12/31 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP基于XMLWriter操作xml的方法分析
2017/07/17 PHP
深入理解javascript作用域和闭包
2014/09/23 Javascript
微信JS接口汇总及使用详解
2015/01/09 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
jquery使用Cookie和JSON记录用户最近浏览历史
2016/04/19 Javascript
Jquery修改image的src属性,图片不加载问题的解决方法
2016/05/17 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
微信小程序图片自适应支持多图实例详解
2017/06/21 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
Vue实现双向绑定的原理以及响应式数据的方法
2018/07/02 Javascript
JavaScript碎片—函数闭包(模拟面向对象)
2019/03/13 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
js实现石头剪刀布游戏
2020/10/11 Javascript
[29:23]2014 DOTA2国际邀请赛中国区预选赛 LGD-GAMING VS CIS 第一场1
2014/05/23 DOTA
初步解析Python中的yield函数的用法
2015/04/03 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
python使用webdriver爬取微信公众号
2018/08/31 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
scrapy-splash简单使用详解
2021/02/21 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
社会公德演讲稿
2014/05/20 职场文书
爱与责任师德演讲稿
2014/08/26 职场文书
公务员年终个人总结
2015/02/12 职场文书
惹女朋友生气检讨书
2015/05/06 职场文书
女性健康知识讲座主持词
2015/07/04 职场文书
Java使用jmeter进行压力测试
2021/07/09 Java/Android