Vue.js应用程序中具有Spring路由的基本Auth？

Question

在我的 Vue.js 项目中实施Basic Auth身份验证时，我在这里遇到了困难。 API路由是通过 Spring 实现的。由于某种原因，我似乎可以绕过授权来访问路由中的数据。

这在我的 main.js 文件

中

(async function () {
  try {

    const response = await http.get("/games", {
      headers: {
        Authorization: "Basic " + new Buffer(this.username":"this.password).toString("base64"),
        'X-Requested-With': 'XMLHttpRequest'
      }
    });
    if (response && response.status === 200) {
      const response = await http.get("home", {
        withCredentials: true
      });
      await store.dispatch("Auth", response.data);
      router.push({
        name: "firstGame"
      });
    }
  } catch (e) {
    console.log(e);

  }

我认为应该发生的事情是，我将被授予从路由访问数据的权限。但是我遇到了这些错误：

OPTIONS [route] net::ERR_CERT_AUTHORITY_INVALID
Error: Network Error
    at createError (createError.js?16d0:16)
    at XMLHttpRequest.handleError (xhr.js?ec6c:87)
GET [route] net::ERR_CERT_AUTHORITY_INVALID

如何通过身份验证？