fetch请求出错 原因CORS头缺少 ‘Access-Control-Allow-Origin’ 的解决方案

难度:简单
原因:安全

问题
Javascript fetch有的时候会遇到请求不成功,console.log给的反馈是原因:CORS 头缺少 ‘Access-Control-Allow-Origin’

解释
随着restful, http api等技术的普及,现代web应用的数据交互呈现pieces of, 网状结构的特征。其中关键技术之一称为跨域请求服务cors,补充一下,域由协议,域名,端口三部分组成,只要有一部分不同就是一个不同的域。

回到原话题,用一个简单的例子来解释,你的web应用部署在域https://a.cn,向https://b.cn的cdn发出fetch异步请求。在Request Header里有一个字段Origin: https://a.cn。相对应的,在b的Response Header里有一个字段Access-Control-Allow-Origin: VALUE,这里的VALUE根据你的安全策略设置。如果https://a.cn在VALUE的列表里,则b会对该fetch请求给出正确的响应。

当然实际的开发可能还会搭配credential等验证手段。
tip,如果VALUE为*,则会对任何域的请求提供服务。

为您推荐