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 位置函数offset,innerWidth,innerHeight,outerWidth,outerHeight,scrollTop,scrollLeft
Mar 23 Javascript
jQuery JSON的解析方式分享
Apr 05 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JavaScript基础教程——入门必看篇
May 20 Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
js封装tab标签页实例分享
Dec 19 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
Weex开发之WEEX-EROS开发踩坑(小结)
Oct 16 Javascript
聊聊Vue中provide/inject的应用详解
Nov 10 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
dede3.1分页文字采集过滤规则详说(图文教程)续四
2007/04/03 PHP
Yii框架调试心得--在页面输出执行sql语句
2014/12/25 PHP
PHP简单实现循环链表功能示例
2017/11/10 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
jQuery之网页换肤实现代码
2011/04/30 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jQuery中$.fn的用法示例介绍
2013/11/05 Javascript
avalonjs实现仿微博的图片拖动特效
2015/05/06 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
微信小程序JS加载esmap地图的实例详解
2019/09/04 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
2019/11/01 jQuery
浅谈Vue2.4.0 $attrs与inheritAttrs的具体使用
2020/03/08 Javascript
详解VUE中的插值( Interpolation)语法
2020/10/18 Javascript
[00:32]2018DOTA2亚洲邀请赛VGJ.T出场
2018/04/03 DOTA
Python常用正则表达式符号浅析
2014/08/13 Python
Python中list初始化方法示例
2016/09/18 Python
python中使用iterrows()对dataframe进行遍历的实例
2018/06/09 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python GUI库PyQt5样式QSS子控件介绍
2020/02/25 Python
python实现mean-shift聚类算法
2020/06/10 Python
Python多分支if语句的使用
2020/09/03 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
Python环境搭建过程从安装到Hello World
2021/02/05 Python
英国马莎百货官网:Marks & Spencer
2016/07/29 全球购物
英国玛莎百货美国官网:Marks & Spencer美国
2018/11/06 全球购物
RetroStage德国:复古服装
2019/02/03 全球购物
学生会部长竞聘书
2014/03/31 职场文书
工伤私了协议书范本
2014/11/24 职场文书
2015年环卫处个人工作总结
2015/07/27 职场文书
个人道歉信大全
2019/04/11 职场文书
sass 常用备忘案例详解
2021/09/15 HTML / CSS
quickjs 封装 JavaScript 沙箱详情
2021/11/02 Javascript