企业官网建设流程全解析

网站内页产品 首页推荐,工业设计网站设计,wordpress shortlink,友情链接的网站Springboot如何解决跨域问题#xff1f;Springboot如何解决跨域问题#xff1f;一、先搞懂#xff1a;为什么会有跨域#xff1f;1.1 同源的定义1.2 跨域的表现二、方案1#xff1a;JSONP#xff08;基本不用#xff09;2.1 原理2.2 实战代码后端接口前端测试2.3 适用场…Springboot如何解决跨域问题Springboot如何解决跨域问题一、先搞懂为什么会有跨域1.1 同源的定义1.2 跨域的表现二、方案1JSONP基本不用2.1 原理2.2 实战代码后端接口前端测试2.3 适用场景三、方案2全局配置WebMvcConfigurer3.1 原理3.2 实战代码全局配置类测试接口前端测试Axios3.3 适用场景四、方案3CorsFilter官方Filter方案4.1 原理4.2 实战代码配置类4.3 适用场景五、方案4局部配置CrossOrigin注解5.1 原理5.2 实战代码单个接口配置Controller级配置5.3 适用场景六、方案对比与选型建议Springboot如何解决跨域问题在前后端分离架构中跨域问题是Java开发者绕不开的“基础门槛”。本文从跨域的本质同源策略出发系统讲解SpringBoot中5种主流跨域方案每个方案包含原理解析可运行代码适用场景帮你彻底解决跨域问题。一、先搞懂为什么会有跨域跨域的根源是浏览器的同源策略Same-Origin Policy——这是浏览器的安全机制要求请求的“源”必须与当前页面的“源”完全一致才允许交互。也就是说在两个后端之间互相调用接口是没有跨域问题的。1.1 同源的定义“源”由三部分组成三者完全相同才叫“同源”协议如http/https域名如localhost/www.xxx.com端口如8080/8090示例当前页面是http://localhost:8080以下请求会被判定为跨域https://localhost:8080协议不同http://127.0.0.1:8080域名不同http://localhost:8090端口不同1.2 跨域的表现浏览器会拦截跨域请求控制台抛出类似错误Access to XMLHttpRequest at http://localhost:8081/api from origin http://localhost:8080 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.二、方案1JSONP基本不用JSONP是早期跨域方案前端后端需要同时更改需要增加一个callback请求参数当然这个callback参数也可以自定义。2.1 原理前端通过script标签请求后端接口传递回调函数名如callbackhandleData后端将数据包裹在回调函数中返回如handleData({msg:success})前端提前定义回调函数接收并处理数据。2.2 实战代码后端接口importorg.springframework.web.bind.annotation.GetMapping;importorg.springframework.web.bind.annotation.RequestParam;importorg.springframework.web.bind.annotation.RestController;RestControllerpublicclassJsonpController{/** * JSONP接口接收前端传递的callback参数返回包裹后的JSON */GetMapping(/info)publicStringjsonpInfo(RequestParamStringcallback){// 模拟返回的数据比如根据id16查询到的信息Stringdata{\code\:200,\msg\:\success\,\data\:{\id\:16,\name\:\测试数据\,\desc\:\JSONP跨域示例\}};// 拼接JSONP格式的响应回调函数名 数据returncallback(data);}}前端测试!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8titlejQuery Ajax JSONP跨域示例/title!-- 引入jQuery --scriptsrchttps://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js/script/headbodybuttonidsubmitBtn发起JSONP请求/buttonscript$(#submitBtn).click(function(){$.ajax({url:http://localhost:8080/info?id16,// 后端接口地址带参数id16type:GET,// JSONP仅支持GET请求dataType:jsonp,// 关键指定数据类型为jsonpjsonp:callback,// 告诉后端前端用callback参数传递回调函数名默认就是callback可省略success:function(response){// 成功接收后端返回的数据console.log(JSONP请求成功返回数据,response);alert(请求成功数据IDresponse.data.id名称response.data.name);},error:function(err){console.error(JSONP请求失败,err);alert(请求失败请检查控制台);}});});/script/body/html2.3 适用场景仅适用于简单GET请求或需要兼容老旧浏览器如IE的场景不推荐现代项目使用。三、方案2全局配置WebMvcConfigurer这是SpringBoot中最常用、最优雅的跨域方案通过配置全局CORS规则实现。3.1 原理基于W3C的CORS标准服务端通过响应头告知浏览器“允许哪些源的请求”核心响应头包括Access-Control-Allow-Origin允许的跨域源Access-Control-Allow-Methods允许的请求方法Access-Control-Allow-Credentials是否允许携带Cookie。3.2 实战代码全局配置类importorg.springframework.context.annotation.Configuration;importorg.springframework.web.servlet.config.annotation.CorsRegistry;importorg.springframework.web.servlet.config.annotation.WebMvcConfigurer;ConfigurationpublicclassGlobalCorsConfigimplementsWebMvcConfigurer{OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping(/**)// 匹配所有接口.allowedOriginPatterns(*)// 允许所有源生产环境建议指定域名.allowedMethods(GET,POST,PUT,DELETE)// 允许的请求方法.allowedHeaders(*)// 允许所有请求头.allowCredentials(true)// 允许携带Cookie.maxAge(3600);// 预检请求缓存1小时}}测试接口RestControllerpublicclassTestController{GetMapping(/api/test/get)publicStringtestGet(){returnGET跨域成功;}PostMapping(/api/test/post)publicStringtestPost(RequestBodyStringdata){returnPOST跨域成功接收data;}}前端测试Axiosscriptsrchttps://cdn.jsdelivr.net/npm/axios/dist/axios.min.js/scriptbuttononclickaxios.get(http://localhost:8080/api/test/get).then(resalert(res.data))测试GET/buttonbuttononclickaxios.post(http://localhost:8080/api/test/post,{name:张三}).then(resalert(res.data))测试POST/button3.3 适用场景前后端分离的现代项目推荐作为默认方案使用。四、方案3CorsFilter官方Filter方案通过Spring官方的CorsFilter实现跨域比手动写Filter更规范、更灵活。4.1 原理CorsFilter是Spring封装的CORS过滤器通过CorsConfiguration配置规则再绑定到指定路径自动拦截请求并添加跨域响应头。4.2 实战代码配置类importorg.springframework.context.annotation.Bean;importorg.springframework.context.annotation.Configuration;importorg.springframework.web.cors.CorsConfiguration;importorg.springframework.web.cors.UrlBasedCorsConfigurationSource;importorg.springframework.web.filter.CorsFilter;importjava.util.Collections;ConfigurationpublicclassCorsFilterConfig{BeanpublicCorsFiltercorsFilter(){// 1. 配置跨域规则CorsConfigurationconfignewCorsConfiguration();config.setAllowedOriginPatterns(Collections.singletonList(*));config.addAllowedHeader(CorsConfiguration.ALL);config.addAllowedMethod(CorsConfiguration.ALL);config.setAllowCredentials(true);config.setMaxAge(3600L);// 2. 绑定路径UrlBasedCorsConfigurationSourcesourcenewUrlBasedCorsConfigurationSource();source.registerCorsConfiguration(/**,config);// 所有路径应用规则// 3. 返回CorsFilterreturnnewCorsFilter(source);}}4.3 适用场景需要更灵活的跨域逻辑如动态调整跨域规则或项目中已使用Filter链的场景。五、方案4局部配置CrossOrigin注解仅为个别接口/Controller配置跨域优先级高于全局配置。5.1 原理CrossOrigin是Spring提供的注解底层基于CORS机制为标注的接口自动添加跨域响应头。5.2 实战代码单个接口配置RestControllerpublicclassCrossOriginController{CrossOrigin(origins*,maxAge3600)GetMapping(/api/cross/test)publicStringcrossTest(){return单个接口跨域成功;}}Controller级配置CrossOrigin(originshttp://localhost:8080)// 仅允许8080源RestControllerpublicclassCrossOriginController2{GetMapping(/api/cross/test2)publicStringcrossTest2(){returnController级跨域成功;}}5.3 适用场景个别接口需要单独配置跨域的场景不推荐全局使用。六、方案对比与选型建议方案适用场景优点缺点JSONP简单GET请求、兼容老旧浏览器实现简单仅支持GET、有安全风险WebMvcConfigurer前后端分离全局跨域优雅简洁、易维护灵活性稍弱CorsFilter复杂跨域规则、Filter链场景灵活可控、官方规范代码量略多CrossOrigin个别接口/Controller跨域局部配置、无需全局修改不适合全局场景