Axios完成HTTP Basic Auth认证后iframe仍二次要求输入凭据如何处理

HTTP Basic Auth的认证逻辑为：客户端需要在请求头Authorization中携带编码后的用户名密码凭证，才能通过服务端校验。
你通过Axios发起的请求手动配置了auth参数，Axios会自动将传入的用户名和密码编码后填充到Authorization头中，因此可以正常通过校验。但这个请求头仅对当前单次Axios请求有效，浏览器不会将这组认证凭证全局存储，也不会自动复用到其他请求上。
当你给iframe设置src属性时，浏览器会单独发起一次全新的GET请求加载iframe资源，这个请求默认不会携带之前Axios请求中的Authorization头，因此Nginx会返回401未认证状态码，触发浏览器自带的Basic Auth凭证输入弹窗。

• 方案1（测试用）：将认证凭证直接拼接在iframe的src URL中，格式为https://<用户名>:<密码>@<域名>/<路径>，对应你的代码可以修改为self.grafana_url = 'https://user:123456@grafana.webapp.com/d-solo/panelId=2'。该方案实现成本最低，但存在两个缺陷：一是部分老旧浏览器会拦截该格式的URL，二是用户名密码会直接暴露在前端代码和浏览器访问日志中，仅适合内部测试场景使用，禁止用于生产环境。
• 方案2（通用方案）：调整Nginx代理规则，将Grafana的访问路径代理到你当前前端应用的同域名下，比如配置所有/grafana/*前缀的请求都转发到https://grafana.webapp.com。同时修改Nginx的认证逻辑，用户第一次通过Basic Auth认证后下发一个会话Cookie，后续同域名下的所有请求（包括iframe发起的请求）都会自动携带该Cookie，Nginx校验Cookie有效即可直接放行，无需重复校验Basic Auth凭证。
• 方案3（生产最优）：开启Grafana的Auth Proxy认证模式，在Nginx层完成Basic Auth校验后，直接向Grafana传递X-WEBAUTH-USER等身份标识请求头，Grafana会直接信任代理层的认证结果，无需用户再次登录，完全规避Basic Auth弹窗问题。

内容的提问来源于stack exchange，提问作者ninsonTan