Response to preflight request doesn‘t pass access control check: No ‘Access-Control-Allow-Origin‘ he

完整报错:

Access to XMLHttpRequest at 'http://localhost:58081/api/v1/house/page' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

报错场景:

使用axios请求,并在请求头添加token,发送请求,后端能成功接收请求,但请求头没有token,导致过滤器拿不到token进行校验。

错误的产生原因是在使用axios发送请求的时候,加入了自定义请求头headers: { ‘Content-Type’: 'application/j // 其他需要的头},然后 axios 就会产生options试探请求。
是配置的过滤器拦截了预检请求(preflight request)。预检请求是一种由浏览器自动发送的、使用OPTIONS方法的HTTP请求,它用于检查实际请求是否可以被服务器接受。

解决:

当你的拦截器拦截到这种OPTIONS请求时,如果没有正确地处理(例如,返回正确的CORS头部信息),那么浏览器就会认为服务器是不可连接到的所以阻止实际的请求发送,所以我们需要确保拦截器在处理OPTIONS请求时,返回正确的CORS头部信息。要在拦截器中检查请求的HTTP方法,如果是OPTIONS方法,那么就直接返回一个包含正确CORS头部信息的响应。

需要在权限认证过滤器添加如下代码:

  // 处理预请求的代码
            if ("OPTIONS".equals(((HttpServletRequest) request).getMethod())) {
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Origin", "*");
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, HEAD, OPTIONS");
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Headers", "*");
                ((HttpServletResponse) response).setHeader("Access-Control-Allow-Credentials", "true");
                ((HttpServletResponse) response).setStatus(HttpServletResponse.SC_OK);
                return;
            }

 

 

  • 5
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值