vue回弹实施项目的CORS跨域请�

W3C标准跨来源资源共享(CORS)允许浏览器向跨来源服务器发送XMLHttpRequest请求，克服了ajax请求只能在同一来源使用的限制。关于CORS的详细解读，请参考阮一峰的博客：跨域资源共享CORS。本文通过一个小演示来验证这篇博客中分析的内容。

1.1 .回弹vue项目的建设和启动

我不需要在这里重复细节。任何简单的springboot项目都可以，而前端vue项目只需要axios发送ajax请求。

在我的演示中填写用户名和密码，然后单击登录按钮向后台发起登录请求。js代码如下：

methods : { login : function(){//var user params=this。$qs.stringify(这个。用户)；/* var userParams=JSON.stringify(这。用户)；*/这个。$ axios . post(' http://localhost :8080/log in '，这。用户)。然后(RES={ alert(RES . data)；});}}后台控制器，正在处理登录请求：

/*CORS设置方法1:@ cross origin(origin=' http://localhost 33608081 '，maxage=3600)*/@ request mapping(value='/log in '，method=requestmethod。post，product=' application/JSON；charset=UTF-8 ')@ response body public String user log in(@ request body JSON object 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 ')；字符串名称=(字符串)user . get(' name ')；字符串密码=(字符串)user . get(' password ')；if(name . equals(' zsz ')password . equals(' 888888 '){返回'登录成功！'；}else{return“登录失败”；}}后台以8080端口开始，前台以8081开始。此时不可能跨域，浏览器控制台会报错：

2.把CORS放在第二位

这里主要有两种方法(不过好像还有其他博客之类的)，在springoot中实现起来比较简单(反正springoot好像是各种简单的东西)。

方法1:

@ cross origin(origins=' http://localhost 33608081 '，maxAge=3600)直接在controller方法之前进行标注，并设置跨域源ip和端口，以及预览有效期maxAge等参数。

方法2:

编写一个配置类来配置全局CORS设置。

@Configurationpublic类mycorconfig { @ Beanpublic WebMvcConfigurer corsConfigurer(){返回新的webmvcconfiguradapter(){ @ override public void addcorsmappings(CORS注册表注册表){//对路径和域名的受限访问/*注册表。addmapping ('/API * ')。allowed origins(' http://localhost 33608081 ')；*/registry.addMapping('/** ')。允许原点(全部)。允许方法(全部)。允许标题(全部)。allowCredentials(真)；} };}}如果路径配置为上面的/* *方式，则所有源路径都将接受跨域访问，但也可以配置更详细的路径。

这样就可以成功访问后台，在浏览器中可以看到http请求和响应的结果，如下所示：

3.捕获和验证3。CORS非简单请求预览请求

根据阮一峰的博客，CORS简单请求只发送一个请求，如果服务器设置支持CORS，响应内容会添加Acess-Control-Allow-Origin等字段，否则不添加，浏览器会知道错误并抛出异常；当CORS不是简单的请求时，会先进行预览请求，浏览器会根据响应内容进行正式的XMLHttpRequest请求。

在我的演示中，我通过将http请求的内容类型设置为application/json来发出非简单的请求。这里需要说明的是，默认情况下，axios在application/json中发送请求，而不是我以前用jQuery发送ajax请求时使用的application/x-www-form-URL encoded。但是，我使用了另一种方法来构造查询字符串，最终请求的内容类型将变成application/x-www-form-URL encoded。

变量用户参数=这个。$ QS。Stringify(这个。user)前台请求代码如本文第一节所示，用户对象可以直接在axios请求中传递。当后端没有设置CORS时，控制器信息为：

协议的内容是：

并设置CORS，预览请求结果如下：

请求成功，响应头中添加了各种字段。

再次启动XHR请求后，结果是：

上述实验验证证明了两个CORS请求的过程是符合预期的。希望对大家的学习有帮助，希望大家多多支持我们。