伏龙阁资源网

vue+springboot实现项目的CORS跨域请求
站长资源 2024/11/27 佚名
2 0

跨域资源共享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请求的过程正如预期。希望对大家的学习有所帮助，也希望大家多多支持。

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接