一次前端接口报错net::ERR_HTTP2_PROTOCOL_ERROR的问题记录

问题描述

4月1日系统部署上线,发现上传图片功能跟报错,报错的是获取阿里云OSS签名接口,接口中并没有文件的上传操作,报错信息如图:

检查参数传值正常.于是使用Postman尝试请求生产环境,发现接口返回正常.检查日志并没有发现错误日志.查找了一些关于此错误信息的资料.发现有提到反向代理的问题,然而在尝试之后并没有解决问题.最后还是在接口入口处,发现比其他借口多了一行代码

header(“Access-Control-Allow-Origin : *”)

将此行代码注释后,接口果然正常了.

为什么添加了这行代码会导致Ajax请求报错?而Postman却可以正常访问?
Access-Control-Allow-Origin 是用来设置接口跨域访问的.设置为*表示接受任何域的请求.
根据W3C标准,如果支持用户凭证,设置Access-Control-Allow-Origin为当前域,并且设置Access-Control-Allow-Credentials为true;
否则当设置Access-Control-Allow-Origin为*时,是不允许设置Access-Control-Allow-Credentials为true的.
参考链接:https://www.w3.org/TR/cors/#resource-requests

Access-Control-Allow-Credentials 是用来设置浏览器是否需要将服务器返回值暴露给用户.浏览器遵循W3C准则,当请求Response头的Access-Control-Allow-Origin不是当前域,就不会将返回数据给js . 所以接口设置Access-Control-Allow-Originv为*时,前端无法获取到接口返回的数据.
而Postman工具并没有遵循W3C准则,会忽略http header的设置,所以在postman中接口是正常的.