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 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
js操作二级联动实现代码
Jul 27 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
Mar 28 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
js加入收藏以及使用Jquery更改透明度
Jan 26 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
May 05 Javascript
微信小程序的生命周期的详解
Oct 19 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
vue的安装及element组件的安装方法
Mar 09 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
layui内置模块layim发送图片添加加载动画的方法
Sep 23 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
基于mysql的论坛(7)
2006/10/09 PHP
php使用cookie显示用户上次访问网站日期的方法
2015/01/26 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
php去掉文件前几行的方法
2015/07/29 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
XHTML-Strict 内允许出现的标签
2006/12/11 Javascript
Javascript改变CSS样式(局部和全局)
2013/12/18 Javascript
JavaScript中双叹号!!作用示例介绍
2014/09/21 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
web前端vue filter 过滤器
2018/01/12 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
Angular4.x Event (DOM事件和自定义事件详解)
2018/10/09 Javascript
Vue.js项目实战之多语种网站的功能实现(租车)
2019/08/07 Javascript
JavaScript基于面向对象实现的无缝滚动轮播示例
2020/01/17 Javascript
javascript设计模式 ? 适配器模式原理与应用实例分析
2020/04/13 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python HTTP客户端自定义Cookie实现实例
2017/04/28 Python
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
Django 视图层(view)的使用
2018/11/09 Python
python调用外部程序的实操步骤
2019/03/04 Python
np.random.seed() 的使用详解
2020/01/14 Python
python Xpath语法的使用
2020/11/26 Python
python 实现学生信息管理系统的示例
2020/11/28 Python
微软美国官方网站:Microsoft美国
2018/05/10 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
SQL数据库笔试题
2016/03/08 面试题
土木工程师职业规划范文
2014/03/07 职场文书
简单的辞职信模板
2015/05/12 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Python中tqdm的使用和例子
2022/09/23 Python