从 Angular 调用 api 调用，返回状态 403答案

【问题标题】：calling api call from Angular, returns a status 403从 Angular 调用 api 调用，返回状态 403
【发布时间】：2020-12-04 11:23:30
【问题描述】：

我有一个 Angular 8 应用程序。

我有一个 api 调用。像这样：

  getWelcomePopupsByParticipant(): Observable<WelcomePopup> {
    return this.get('/api/medical/organisation/1/Project/participant/{patientUUID}/participant-welcomepopups');
  }

  get(route: string, responseType: RespType = 'json', fullResponse: boolean = false, params = null): Observable<any> {
    return this.invoke('GET', route, null, responseType, fullResponse, true, params);
  }

现在我尝试在文件中调用该 api 方法：FirstViewModalComponent.ts，如下所示：

  ngOnInit() {
    this.updateScreenDimensions();
    const test =  this.healthApiService.getWelcomePopupsByParticipant().subscribe((welcomPopup: WelcomePopup) => {

      console.log('WelcomePopup', welcomPopup);

    });

  }

但是当我转到那个页面时。我收到此错误：


HttpErrorResponse {headers: HttpHeaders, status: 403, statusText: "Forbidden", url: "http://localhost:50762/api/medical/organisation/1/…-4373-ba22-3ee280c1c45a/participant-welcomepopups", ok: false, …}
error: null
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message: "Http failure response for http://localhost:50762/api/medical/organisation/1/Project/participant/32324147-aad8-4373-ba22-3ee280c1c45a/participant-welcomepopups: 403 Forbidden"
name: "HttpErrorResponse"
ok: false
status: 403
statusText: "Forbidden"
url: "http://localhost:50762/api/medical/organisation/1/Project/participant/32324147-aad8-4373-ba22-3ee280c1c45a/participant-welcomepopups"
__proto__: HttpResponseBase

但我也在使用招摇。在那里它工作正常。

那么我要改变什么？

谢谢

好的，

所以这是后端：

 [HttpGet("participant/{participantId}/participant-welcomepopups")]
        [Authorize(AuthorizationPolicies.ParticipantResource)]
        public async Task<IEnumerable<WelcomePopupDto>> GetWelcomePopupsByParticipant(Guid participantId, int organisationId)
        {
            //get de projects where the participant is participating
            List<Guid> projectsIds = await _patientDbContext.ProjectParticipants
                .Where(i => i.ParticipantId == participantId)
                .Select(i => i.ProjectId).ToListAsync();

            return _medicalDbContext.Projects
                .Where(i => projectsIds.Contains(i.ProjectId) && i.OrganisationId == organisationId && i.ProjectId != _appSettings.DefaultProjectId)
                .Select(i => i.ToWelcomeDto());
        }

是的，它是一个不记名令牌：

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const accessToken = this.auth.getAccessToken();

    if (accessToken != null) {
      const duplicate = request.clone({
        setHeaders: { Authorization: `Bearer  ${accessToken}` }
      });
      return next.handle(duplicate);
    } else {
      return next.handle(request).pipe(
        tap(
          _ => {},
          error => {
            if (
              error instanceof HttpErrorResponse &&
              error.status === 503 &&
              error.url.startsWith(environment.ApiOrigin)
            ) {
              // Logout when the backend api is under maintenance.
              // The indentity server will show the under maintenance page.
              this.auth.requestLogout();
            }
          }
        )
      );
    }
  }

【问题讨论】：

A 403 表示授权错误。 API 是否需要某种登录？如果是这样，您很可能错过了在请求中发送身份验证令牌。
是的，这是真的。因为在 Swagger 中，我以管理员身份登录。但随后我执行 get 方法：/api/medical/organisation/{organisationId}/Project/participant/{participantId}/participant-welcomepopups。并填写其他参与者ID：32324147-AAD8-4373-BA22-3EE280C1C45A 和组织= 1。这样就可以了
那么在这种情况下——取决于 api 需要什么样的身份验证——你必须先实现它，然后将身份验证令牌与请求一起发送。
好吧，你到底是什么意思？
他无法回答，因为他不知道您使用的是什么类型的授权。你在使用不记名令牌吗？您在使用 SAML 吗？无论如何，您都需要在调用成功之前添加一个标题。

标签： javascript c# angular api

【解决方案1】：

您可能需要在标头中发送 withCredentials 以及您的 API 令牌

例如：

const httpOptions = {
  headers: new HttpHeaders({
   'Content-Type': 'application/json',
   'Authorization': 'Bearer YOUR_TOKEN_HERE'
  }),
 withCredentials: true
};

然后将 httpOptions 添加到您的 API 调用中

myCall() {
  return this.http.get('https://www.example.com/api',httpOptions);
}

供参考：https://angular.io/api/common/http/HttpRequest

【讨论】：