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 相关文章推荐
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
Mar 10 Javascript
关于可运行代码无法正常执行的使用说明
May 13 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
Dec 29 Javascript
js获取url参数代码实例分享(JS操作URL)
Dec 13 Javascript
IE中getElementsByName()对有些元素无效的解决方案
Sep 28 Javascript
jQuery显示和隐藏 常用的状态判断方法
Jan 29 Javascript
理解JavaScript的变量的入门教程
Jul 07 Javascript
快速学习AngularJs HTTP响应拦截器
Dec 31 Javascript
jQuery表格插件datatables用法详解
Nov 23 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
Jul 18 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 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中static关键字原理的学习研究分析
2011/07/18 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
laravel-admin 在列表页添加自定义按钮的例子
2019/09/30 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
php析构函数的具体用法小结
2014/03/11 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
js使用for循环查询数组中是否存在某个值
2014/08/12 Javascript
jQuery+ajax中getJSON() 用法实例
2014/12/22 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
JavaScript中省略元素对数组长度的影响
2016/10/26 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
详解vue配置后台接口方式
2019/03/29 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
[02:47]2018年度DOTA2最佳辅助位选手4号位-完美盛典
2018/12/17 DOTA
wxPython窗口中文乱码解决方法
2014/10/11 Python
对numpy.append()里的axis的用法详解
2018/06/28 Python
python项目对接钉钉SDK的实现
2019/07/15 Python
python脚本后台执行方式
2019/12/21 Python
django项目中新增app的2种实现方法
2020/04/01 Python
python和php学习哪个更有发展
2020/06/17 Python
对python pandas中 inplace 参数的理解
2020/06/27 Python
Python 使用office365邮箱的示例
2020/10/29 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
英智兴达软件测试笔试题
2016/10/12 面试题
无工作经验者个人求职信范文
2013/12/22 职场文书
餐厅楼面主管岗位职责范本
2014/02/16 职场文书
承租经营合作者协议书
2014/10/01 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2019年教师节:送给所有老师的祝福语
2019/09/05 职场文书