如何使用 Vue.js 2、BootstrapVue 和 axios 在 Chrome

Question

我快要疯了，因为我无法让Chrome 密码管理器要求使用表单保存密码。假设 Firefox 毫无问题地保存了用户名/电子邮件和密码：另一方面，Chrome忽略了我所做的每一个更改。我已经知道谷歌发布了这项成就的最佳实践，但我无法使用 Fetch API 登录，也无法调整建议的代码axios，我只收到一条错误消息，说我需要存储apasswordCredentialData或中的凭据HTMLFormElement，尝试使用PasswordCredential构造函数（无论我如何传递这些凭据）。不管怎样，表单本身应该支持浏览器的内置功能。这是输出代码的示例：<form>  <fieldset>    <input id="email" name="email" type="email" required="required" autocomplete="username email">    <input id="password" name="password" type="password" required="required" autocomplete="current-password">  </fieldset>  <button type="submit"></button></form>这应该已经足够了，但它是由 Vue.js 和 BootstrapVue 生成的表单。我已经知道 AJAX 的已知问题。另外，我尝试action="/login"method="post"在元素标签中添加<form>和它没有改变任何东西。然后，我尝试用new-password- 而不是current-password- 也……什么都没有改变。当然，由 BootstrapVue 生成，来源有点不同。<b-form @submit.prevent="handleLogin">  <b-form-group>    <b-form-input autocomplete="username email" id="email" name="email" required type="email" v-model="form.email"></b-form-input>    <b-form-input autocomplete="current-password" id="password" name="password" required type="password" v-model="form.password"></b-form-input>  </b-form-group>  <b-button type="submit"></b-button></b-form>我删除了与该问题无关的类和其他代码片段，例如占位符和标签，以便更好地阅读。我按照此处所述调用了一个onsubmit事件。我了解到 Google在成功重定向（在本例中为 Vue.js 路由重定向）后会激活 Chrome 密码管理器——因此相关逻辑至关重要。我尝试添加{ withCredentials: true }到请求属性，但正如我所说，由于数据格式，axios它无法创建新的构造函数。使用 Vue.js和预定义模型PasswordCredential是理想的选择，尽管使用专用对象也会失败。form.emailform.passwordFormDataasync handleLogin() {  await axios    .post("/auth", {      email: this.form.email,      password: this.form.password    },    {      withCredentials: true    })      .then({        ...      })      .catch({        ...      });}上面，方法的第一行用于处理登录。我认为这可能只是一个起点，因为 Google Developers 展示了如何使用 Fetch API 和构造函数存储凭据PasswordCredential。我浏览了 SO 存档几个星期，但我仍然无法继续；如果您介意的话，进行同步调用并不能解决问题。我究竟做错了什么？编辑 •谷歌密码管理器是否有可能仅仅因为我在一个不安全的区域（没有或没有未签名的 SSL 证书的本地域）而无法工作？