Angular - 不记名令牌答案

【问题标题】：Angular - Bearer tokenAngular - 不记名令牌
【发布时间】：2021-09-17 18:33:20
【问题描述】：

我遇到了身份验证问题。当我使用 POSTMAN 并添加带有承载令牌的授权标头时，一切都很好。但是当我尝试 Angular 的请求时，我会收到回复 405 Method Not Allowed。我正在使用 Angular 5，我的代码非常简单：

    import { HttpHeaders, HttpClient } from '@angular/common/http';
    const my_token = 'xxx'
    @Injectable()
    export class RequestService {
      makeRequest() {
        return this.http.get(api.get, {headers: new HttpHeaders(
          {
            'Authorization': `Bearer ${my_token}`,
            'Content-Type': 'application/json'
          })});
        }
     }

我做错了什么？

【问题讨论】：

你能发布邮递员请求和角度请求信息吗？
'Bearer my_token' 字面意思？请发布您的真实代码，以便我们看到问题
邮递员的请求也是GET请求吗？
我已经编辑了我的示例。 “Authorization”的值是“Bearer”，后跟我的令牌。但它不起作用。
不确定 POSTMAN 但肯定你必须写 'Autorization': `Bearer ${my_token}` 使用反引号

标签： angular

【解决方案1】：

这是一个老问题，但将我的想法发布给未来的读者。会尽量保持简短。

理论

在我看来，这个问题似乎与 CORS (Cross Origin Resource Sharing) 有关。当www.domain1.com 调用www.domain2.com 时，它被认为是不安全的，浏览器需要一些特殊的标头来处理您的请求（阅读Access-Control-Allow-Origin，Access-Control-Allow-Methods）。甚至 www.domain:1000.com 和 www.domain:2000.com 也被视为不同的域。

为什么 POSTMAN 有效？

POSTMAN（甚至 Telerik Fiddler）是一种工具，而不是浏览器。因此，他们不关心响应中的任何标头并呈现响应。这就是他们工作的原因。但是当您通过 Angular 运行它时，该应用程序会在浏览器中打开，因此您会看到 CORS 的问题。

解决方案

最后，这是服务器端代码而不是客户端的问题。您的 Angular 代码很好，您需要执行以下任一操作来修复它。

永久：在服务器端代码中启用 CORS。在互联网上阅读更多内容。
临时：为 CORS 安装 Chrome 扩展程序（许多免费可用）并启用插件的状态。您的 Angular 应用应该可以正常工作了。

旁注

关于添加新请求标头的代码，它不应该是某些 HTTP 拦截器的一部分吗？

我了解到您只是想提出问题，它可能不是您的原始代码。但还是想指出这一点。

希望对你有帮助。

【讨论】：

【解决方案2】：

您必须将 my_token 与 Bearer

连接起来

这是一个例子

import { HttpHeaders, HttpClient } from '@angular/common/http';
@Injectable()
export class RequestService {
     makeRequest() {
        return this.http.get(api.get, {headers: new HttpHeaders(
        {
          'Authorization': 'Bearer' + my_token,
           'Content-Type': 'application/json'
              })});
        }
      }

【讨论】：

感谢您的回答。在我的例子中，我应该更精确。我的“授权是一个直字符串”的价值。

【解决方案3】：

首先将 my_token 与 Bearer 连接起来，如下所示：
my_token1 = `Bearer ${my_token}`
（使用反引号）

然后像
一样使用它 '授权'：${my_token1},

【讨论】：