侧边栏壁纸
博主头像
M酷博主等级

一帆风顺 ⛵️⛵️⛵️

  • 累计撰写 45 篇文章
  • 累计创建 40 个标签
  • 累计收到 456 条评论

目 录CONTENT

文章目录

OPTIONS请求失败,Request header field xxx is not allowed by Access-Control-Allow-Headers

M酷
2021-03-22 / 0 评论 / 1 点赞 / 2,680 阅读 / 605 字 / 正在检测是否收录...
广告 广告

背景

最近工作中有一个项目需要部署到 APP 中,规定需要配置转发服务,由专门的服务器去转发页面的请求,通过配置之后,页面都能正常访问,但是请求接口的时候都无法获取数据,查看控制台,发现只有 OPTIONS 请求,没有真实请求,控制台还提示如下错误:

分析

通过错误提示,我们意识到是响应头里面不接受我们自己添加的这个 headers 属性,导致预检请求不通过,通过查看请求的详细信息,发现问题所在,如图:

可以看到,响应头里面有一个字段 access-control-allow-headers,里面配置了服务端允许接受的 headers 字段,一般情况下这里应该是一个*号,就是接受所有,但是这里可能是为了安全考虑进行了限制,这就导致我们添加的 headers 中的自定义属性无法通过检查,到时 OPTIONS 请求后无法继续下去。

解决办法

既然知道原因所在,那么自然就有以下解决办法:

  • 1.让后端在 access-control-allow-headers 中也加入我们自定义的字段名;
  • 2.移除我们加在 headers 中的自定义字段;

经过沟通,发现修改后端配置影响可能比较大,所以最后采用了第二种方式,在前端直接去掉 headers 中这个自定义字段,放到参数里,让后台从参数里去获取。

1
广告 广告

评论区