vue+springboot实现项⽬的CORS跨域请求
跨域资源共享CORS（Cross-origin Resource Sharing），是W3C的⼀个标准，允许浏览器向跨源的服务器发起XMLHttpRequest请求，克服ajax请求只能同源使⽤的限制。关于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("localhost:8080/login",this.User).then(res=>{
alert(res.data);
});
}
}
后台控制器部分，对登录请求的处理：
/*CORS设置⽅法1：@CrossOrigin(origins = "localhost:8081", maxAge = 3600)*/
@RequestMapping(value="/login",method = RequestMethod.POST, produces = "application/json;charset=UTF-8" )
@ResponseBody
public String userlogin(@RequestBody JSONObject user) {
/*String Parameter("name");
String Parameter("password");*/
System.out.println("name: " + ("name"));
System.out.println("password: " + ("password"));
String name = (String) ("name");
String password = (String) ("password");
if(name.equals("zsz") && password.equals("888888")){
return "login success!";
}else{
return "login failed";
}
}
后台以8080端⼝启动，前台以8081启动，此时⽆法跨域，浏览器控制台会报错：
2.springboot设置CORS
此处主要有两种⽅法（但是貌似有其他博客还有更多种），在springboot中实现都⽐较简单（反正springboot好像就是各种省事各种简单）。
⽅法1：
@CrossOrigin(origins = "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("localhost:8081");*/
registry.addMapping("/**")
.allowedOrigins(ALL)
.allowedMethods(ALL)
.
allowedHeaders(ALL)
.allowCredentials(true);
}
};
}
}
如果路径配置成以上的 /**则对所有源路径均接受跨域访问，当然也可以配置更详细的路径。
这样可以成功访问后台，浏览器中可以看到http请求和响应的结果如下图：
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。
jquery实现ajaxvar userParams = this.$qs.stringify(this.User)
前台请求代码如本⽂第⼀节中所⽰，在axios请求中直接传⼊User对象即可。在后端不设置CORS的时候，控制器信息为:
协议内容为：
⽽设置了CORS，预检请求结果为：
请求成功，并且在响应头中添加了各种字段。
再次发起XHR请求后，结果为：
以上实验验证证明了两种CORS请求的过程正如预期。希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。