API 的 Auth0 访问令牌在邮递员中有效，但在从 Vue 调用时无效

Posted 2023-03-10

【中文标题】API 的 Auth0 访问令牌在邮递员中有效，但在从 Vue 调用时无效

【英文标题】：Auth0 access token to API works in postman but not when calling from Vue

【发布时间】：2020-02-01 09:48:03

【问题描述】：

我在 Auth0 中设置了 2 个项目：

应用程序 - 单页应用程序 API - 自定义 API，机器对机器

我已按照以下链接中的说明调用自定义 API：

https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api

我已经下载了为上述两个项目配置设置的示例。 Vue 应用程序能够正确登录，并且能够使用下载的示例代码调用外部 API（外部 API，“后端”，示例代码中是用 Node JS 编写的） .

但是，当我将后端更改为已为第 2 项（自定义 API）设置的 Laravel/Lumen 应用程序时，Vue 应用程序收到 401 未经授权的错误。所以，我复制了通过 Vue 检索到的访问令牌：

const accessToken = await this.$auth.getTokenSilently();

console.log(accessToken);

并尝试使用此访问令牌调用 Lumen 后端 - 它工作得非常好！ 是否有我可能遗漏的设置使 Vue 和 Lumen 能够与 Auth0 一起使用？

p/s：自定义 Lumen API 是按照以下说明制作的：

https://auth0.com/blog/developing-restful-apis-with-lumen/

【问题讨论】：

laravel 应用是否已注册并允许访问 auth0 仪表板中的 API？如果您转到破折号中的 api 并查看 M2M 连接，您应该能够切换应用程序。

我已经将流明应用程序设置为在 Auth0 中注册的 API。但是，经过进一步调查，我发现 Vue 应用程序没有将 Authorization 标头发送到 lumen 应用程序。这很奇怪，因为相同的 Vue 代码在 express js 后端上运行良好。所以我想这不是Auth0的问题。谢谢

【参考方案1】：

好吧，原来我在示例代码的 axios 部分犯了一个错误。示例使用 get，而我的 API 使用 post。所以我最终在错误的 axios 参数中发送了标头。希望这对遇到同样问题的人有所帮助。