做网站项目体会,临淄网站建设公司,兰州生活网,深圳手机商城网站设计Springboot拦截器中跨域失效的问题
一、概述
1、具体场景 起因#xff1a; 同一个接口#xff0c;传入不同参数进行值的修改时#xff0c;一个成功#xff0c;另一个竟然失败#xff0c;而且是跨域问题拦截器内的request参数调用getHeader方法时#xff0c;获取不到前端…Springboot拦截器中跨域失效的问题
一、概述
1、具体场景 起因 同一个接口传入不同参数进行值的修改时一个成功另一个竟然失败而且是跨域问题拦截器内的request参数调用getHeader方法时获取不到前端设置的请求头且浏览器显示有但是后端输出后只有对于的key而且key变成了access-control-request-headers的value 同一个接口不同参数错误展示 前端代码展示 浏览器请求头显示 后端获取request的header参数显示 全是null 输出headers {sec-fetch-modecors, refererhttp://localhost:8080/, sec-fetch-sitecross-site, accept-languagezh-CN,zh;q0.9, originhttp://localhost:8080, access-control-request-methodPOST, accept*/*, host127.0.0.1:8099, access-control-request-headerscontent-type,headeruserid,headerusertoken, connectionkeep-alive, accept-encodinggzip, deflate, br, user-agentMozilla/5.0 (Linux; Android 8.0.0; SM-G955U Build/R16NW) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.0.0 Mobile Safari/537.36, sec-fetch-destempty}变成了这样access-control-request-headerscontent-type,headeruserid,headerusertoken,
2、背景 前端 是个uniapp项目只会调不会写未设置跨域 后端 spring boot项目后端使用了CrossOrigin(origins *)进行了简单的跨域设置后端使用了拦截器进行拦截认证
3、尝试改bug 发现前端的参数key浏览器的参数key和后端的参数key大小写不一致 修改了多次且尝试了多次无效果
String userId request.getHeader(headerUserId);
String userId2 request.getHeader(HeaderUserId);
String userId3 request.getHeader(Headeruserid);尝试前端添加跨域 统一设置跨域请求头不会只会小改前端添加Access-Control-Allow-Origin: *无效后面认真看才发现这是响应头不是请求头sha呗了 尝试后端的拦截器内添加CrossOrigin(origins “*”)、具体拦截方法内给响应参数添加响应头 无效 重启前端项目、清除浏览器缓存、清除idea缓存、rebuild项目、重新运行 无效
二、解决办法 试了很多方法慢慢的就定位了问题 前端设置的请求头浏览器可以接收而且具体显示那就不是前端的问题后端试了很多次拦截器获取的request header 的key和value还是null如果取消拦截器正常可以获取那么可能是拦截器的问题我的CrossOrigin(origins *)加在我的接口上但是拦截器先执行如果没用通过那么直接返回根本到不了我的接口也就到不了我接口上的CrossOrigin(origins *)那就没用跨域了但是我尝试再拦截器内的方法中手动给response响应添加跨域的代码如下但是还是无效
// 支持跨域
response.setHeader(Access-Control-Allow-Origin, *);
response.setHeader(Access-Control-Allow-Methods,
GET,POST,PUT,DELETE,OPTIONS);
response.setHeader(Access-Control-Allow-Credentials, true);
response.setHeader(Access-Control-Allow-Headers, Content-Type,X-Token);
response.setHeader(Access-Control-Allow-Credentials, true);后面查询跨域的请求流程 跨域请求的流程通常分为两个阶段预检请求Preflight Request和实际请求。以下是跨域请求的一般流程 预检请求阶段 当浏览器检测到跨域请求时例如请求方法不是简单请求方法、请求包含自定义的请求头等会首先发送一个预检请求OPTIONS请求给服务器。预检请求的目的是询问服务器是否允许实际请求中包含特定的自定义请求头字段和请求方法。预检请求会包含一些特定的请求头如Access-Control-Request-Method和Access-Control-Request-Headers用来询问服务器的允许范围。服务器收到预检请求后根据预检请求中的信息判断是否允许实际请求然后发送适当的CORS响应头给浏览器。 实际请求阶段 如果预检请求得到了服务器的允许即服务器返回了合适的CORS响应头浏览器将发送实际的请求给服务器。实际请求中包含了正常的请求方法例如GET、POST、PUT等、请求头和请求体等信息。服务器收到实际请求后会处理请求并返回相应的响应给浏览器。
下图展示了跨域请求的流程 ------------- -------------| Browser | | Server |------------- -------------| || 1. 发送预检请求 |-----------------------|| || 2. 接收预检响应 ||-----------------------| || 3. 发送实际请求 |-----------------------|| || 4. 接收实际响应 ||-----------------------总的来说跨域请求的流程就是浏览器先发送预检请求询问服务器是否允许跨域请求然后根据服务器的响应决定是否发送实际请求。如果预检请求得到了服务器的允许浏览器才会发送实际的请求。 跟着这个OPTIONS请求查找 发现只需要我把这个请求过滤掉即可让它可以实际请求使得我的自定义请求头 - 特定的请求头access-control-request-headerscontent-type,headeruserid,headerusertoken可以接收到我就可以进行判断了。
if (OPTIONS.equals(request.getMethod().toUpperCase())) {return true;
}有效果解决了。 三、拓展
此处是使用的CrossOrigin(origins *)注解同时过滤掉OPTIONS请求实现了跨域
还可以通过只设置一个跨域过滤器解决跨域问题
下列方法转载于博客园作者小泉哥
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;/*** 全局跨域配置类* 跨域请求的配置允许所有来源的跨域请求* * 跨域请求流程* 1. 浏览器发送预检请求OPTIONS请求给服务器询问是否允许实际请求中包含特定的自定义请求头字段和请求方法。* 2. 服务器根据预检请求的信息判断是否允许实际请求发送适当的CORS响应头给浏览器。* 3. 如果预检请求得到了服务器的允许浏览器发送实际的请求给服务器。* 4. 服务器收到实际请求后处理请求并返回相应的响应给浏览器。* * 注当设置allowCredentials为true时Access-Control-Allow-Origin响应头不能使用通配符*而是必须明确指定允许的来源。* * author red-velvet* since 2024/2/8*/
Configuration
public class GlobalCorsConfig {/*** 配置CorsFilter* return CorsFilter*/Beanpublic CorsFilter corsFilter() {// 创建CorsConfiguration对象配置CORS跨域规则CorsConfiguration config new CorsConfiguration();// 允许所有来源的跨域请求config.addAllowedOrigin(*);// 允许携带凭据例如Cookieconfig.setAllowCredentials(false);// 允许所有请求方法的跨域请求config.addAllowedMethod(*);// 允许所有请求头的跨域请求config.addAllowedHeader(*);// 创建UrlBasedCorsConfigurationSource对象注册CORS配置UrlBasedCorsConfigurationSource configSource new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration(/**, config);// 创建CorsFilter对象传入配置源return new CorsFilter(configSource);}
}
dCorsConfigurationSource configSource new UrlBasedCorsConfigurationSource();configSource.registerCorsConfiguration(/**, config);// 创建CorsFilter对象传入配置源return new CorsFilter(configSource);}
}
