HTML Post 表单的身份验证标头答案

【问题标题】：Authentication Header for HTML Post formHTML Post 表单的身份验证标头
【发布时间】：2021-10-24 18:44:02
【问题描述】：

是否可以从标准 HTML 解析/添加对提交的身份验证？例如。我正在使用 oAuth 对登录用户进行身份验证，并且有一个用例，我需要使用具有操作和方法属性的标准 HTML 表单。但我似乎找不到解析我用于身份验证的 JWT 令牌的方法。这可能吗？

提前致谢。

【问题讨论】：

标签： forms api jwt header token

【解决方案1】：

您可以使用 JQuery 表单提交来发送授权标头

var form = $('#form-id').get(0); 
var formData = new FormData(form);

var xhr = new XMLHttpRequest();
xhr.open("POST", "url");
xhr.setRequestHeader("Authorization", "jwt token");
xhr.send(formData);

【讨论】：

【解决方案2】：

不，您不能使用常规的 HTML 表单来执行此操作。如果您需要在请求中添加 Authorization 标头，您唯一能做的就是从 Javascript 发出请求（如 Subhashis 的答案所示）。它不一定是 jQuery，你可以使用纯 JS 和 fetch 或一些库来进行 http 调用（例如 axios）。无论你使用哪个，记住这将是一个 AJAX 调用，所以你的 JS 必须正确处理响应（响应不会被浏览器自动处理）。

【讨论】：

谢谢。我尝试过使用 nativa JS fetch，但是在 POST 请求中，这在 safari 浏览器中不起作用……或者至少在 iPhone 上不起作用。不过，它在 chrome/firefox 上运行良好。因此，使用 fetch 设置身份验证标头在某些浏览器中可以正常工作，但似乎并非如此。你有这方面的经验吗？
您可以在 caniuse.com 上查看可以在浏览器中使用的功能，例如fetch: caniuse.com/?search=fetch 似乎 fetch 也应该在 iPhone 上工作。这一定是 Safari 的一些其他问题。