如何在角度的 api 请求中使用授权标头令牌进行身份验证答案

【问题标题】：How to authenticate using Authorization Header Token in api requests in angular如何在角度的 api 请求中使用授权标头令牌进行身份验证
【发布时间】：2020-09-11 21:53:10
【问题描述】：

我即将请求一个 get 调用以从我的服务器检索数据。我已启用授权，以便在大多数请求中拥有不记名令牌。当我从服务器请求某些东西时，如何包含它？（我在这里做错了什么？请帮帮我。）

例如，我有一个名为 Categories.service.ts 的文件，它将从服务器获取类别。

@Injectable({
  providedIn: 'root'
})
export class CategoriesService {

  private _url: string = "http://ifsstudents.educationhost.cloud/v2/categories/list";

  constructor(private http:HttpClient) { }

  private token: string="Bearer eyJ0eXA....";

  getCategories():Observable<ICategory[]>{
    let header = new HttpHeaders().set(
      "Authorization",this.token
    );

    return this.http.get<ICategory[]>(this._url,{headers:header});
  }
}

我已经使用带有 Bearer 令牌的 Postman 进行了测试，它的工作没有任何问题。

这是错误日志

【问题讨论】：

有什么错误吗？你似乎没有检查错误
检查控制台中的 cors 错误。如果它适用于邮递员但不适用于角度，这通常是原因。如果没有，请显示更多代码（订阅、错误、处理程序）和来自浏览器的网络请求/响应（标头和数据）屏幕截图
等我更新问题@David
这是检查您的配置文件并添加启用核心条目的跨站点起源问题。
您是否尝试使用 test-app 连接到已建立的服务器？如果是，proxy-config 方法可能适合您

标签： javascript angular bearer-token get-request

【解决方案1】：

如下更改CategoriesService

@Injectable({
providedIn: 'root'
})
export class CategoriesService {

private _url: string = "/api/categories/list";

constructor(private http:HttpClient) { }

private token: string="Bearer eyJ0eXA....";

getCategories():Observable<ICategory[]>{
    let header = new HttpHeaders().set(
    "Authorization",this.token
    );

    return this.http.get<ICategory[]>(this._url,{headers:header});
}
}

在您的根文件夹（与src 文件夹相同级别）中创建一个名为proxy.conf.json 的文件，其内容如下

{
  "/api/*": {
    "target": "http://ifsstudents.educationhost.cloud/v2",
    "secure": true,
    "logLevel": "debug",
    "changeOrigin": true,
    "pathRewrite": {
      "^/api": ""
    }
  }
}

启动应用程序

ng serve --proxy-config proxy.conf.json -o

密切关注控制台，看看路由转换是否正确发生 您应该会看到如下内容

[HPM] Rewriting path from "/api/categories/list" to "/categories/list" [HPM] GET /api/categories/list ~> http://ifsstudents.educationhost.cloud/v2

如果您打算将其生产化，您需要在 ifsstudents.educationhost.cloud 中启用适当的 CORS 规则

【讨论】：