fetch带Basic认证请求Elasticsearch API报CORS授权头错误排查

问题现象 #

通过JavaScript发起带Basic基础认证的请求调用Elasticsearch API时触发跨域报错，控制台提示请求头字段Authorization未被Access-Control-Allow-Headers允许，暂无法定位问题源于Elasticsearch配置还是前端代码。
目前已在Elasticsearch中开启CORS配置，使用curl携带认证信息请求Elasticsearch可正常返回结果，初步怀疑fetch请求代码存在问题。

控制台报错截图 #

现有fetch请求代码 #

fetch('http://192.168.150.220:9900/', {
  method:'GET', 
  headers: {
    'Authorization': 'Basic ' + btoa('em_user:3md@t@2o22')
  }
})
.then(response => response.json())
.then(json => console.log(json));

问题定位与解决方案 #

核心原因 #

curl请求可以正常返回结果，说明Elasticsearch服务本身、账号密码认证逻辑均无异常，问题出在Elasticsearch的CORS配置不完整：仅开启CORS开关但未将Authorization头加入允许的请求头列表，浏览器的跨域校验会直接拦截该请求。

注：curl等命令行/服务端发起的请求不受浏览器同源策略约束，不需要遵守CORS规则，因此请求正常不能代表CORS配置正确。

修复步骤 #

1. 打开Elasticsearch配置文件elasticsearch.yml，补充完善CORS相关配置：

# 开启CORS支持
http.cors.enabled: true
# 允许请求携带认证凭证（包含Authorization头、Cookie等）
http.cors.allow-credentials: true
# 配置允许跨域访问的来源，填写前端页面的实际访问地址，禁止使用通配符*（开启allow-credentials后*配置无效），多个地址用英文逗号分隔
http.cors.allow-origin: "http://你的前端服务访问地址"
# 必须将Authorization加入允许的请求头列表，默认配置未包含该字段
http.cors.allow-headers: Authorization,X-Requested-With,Content-Type,Content-Length

2. 保存配置文件后重启Elasticsearch服务，配置即可生效。
3. 原有fetch代码语法无错误，配置生效后重新发起请求即可正常获取返回结果。

临时调试方案 #

如果本地调试阶段暂时无法修改Elasticsearch配置，可以通过前端本地开发服务的代理功能转发请求，绕过浏览器CORS限制，生产环境不推荐使用该方案。

内容的提问来源于stack exchange，提问作者Meikel Rizky Hartawan