Angular，在header中發送請求后報錯500

Question

我很難將正確的 angular 請求傳遞給 header。 這是我的服務：

import { Injectable } from '@angular/core';
import { HttpClient, HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpHeaders } 
from '@angular/common/http';
import { Utente } from '../model/Utente ';
import { Prodotto } from '../model/Prodotto ';
import { OktaAuthService } from '@okta/okta-angular';
import { Observable, from } from 'rxjs';
import { Carrello } from '../model/Carrello ';
import { userInfo } from 'node:os';
import { getLocaleCurrencyCode } from '@angular/common';


const headers = new HttpHeaders().set('Accept', 'application/json');

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

 constructor(
private httpClient:HttpClient, private oktaAuth:OktaAuthService     ) {}

  getCarr(){
return this.httpClient.get<Carrello[]>('http://localhost:8080/prodotti/utente/vedicarrelloo', {headers} );
}
}

這是我的 spring 方法：

@Transactional(readOnly = true)
public List<Carrello> getCarrello(@AuthenticationPrincipal OidcUser utente){
    Utente u= utenteRepository.findByEmail(utente.getEmail());
    return carrelloRepository.findByUtente(u);
}

在控制台中我收到此錯誤（錯誤 500）：

https://i.stack.imgur.com/BiONS.png

此錯誤在我的控制台中對應於“java.lang.NullPointerException：null。

但是如果我訪問 localhost:8080，我可以正確看到答案，所以我認為在 angular 中傳遞請求 header 時存在問題，誰能告訴我我哪里錯了，好嗎？ 我指定僅在存在 OidcUser 的方法中出現此錯誤，rest 完美運行。 謝謝！

Answer 1

您需要隨請求發送訪問令牌。 像這樣：

import { Component, OnInit } from '@angular/core';
import { OktaAuthService } from '@okta/okta-angular';
import { HttpClient } from '@angular/common/http';

import sampleConfig from '../app.config';

interface Message {
  date: string;
  text: string;
}

@Component({
  selector: 'app-messages',
  templateUrl: './messages.component.html',
  styleUrls: ['./messages.component.css']
})
export class MessagesComponent implements OnInit {
  failed: Boolean;
  messages: Array<Message> [];

  constructor(public oktaAuth: OktaAuthService, private http: HttpClient) {
    this.messages = [];
  }

  async ngOnInit() {
    const accessToken = await this.oktaAuth.getAccessToken();
    this.http.get(sampleConfig.resourceServer.messagesUrl, {
      headers: {
        Authorization: 'Bearer ' + accessToken,
      }
    }).subscribe((data: any) => {
      let index = 1;
      const messages = data.messages.map((message) => {
        const date = new Date(message.date);
        const day = date.toLocaleDateString();
        const time = date.toLocaleTimeString();
        return {
          date: `${day} ${time}`,
          text: message.text,
          index: index++
        };
      });
      [].push.apply(this.messages, messages);
    }, (err) => {
      console.error(err);
      this.failed = true;
    });
  }
}

在 Spring 方面，如果您希望它接受 JWT，則需要更改為使用Jwt而不是OidcUser 。 這里的例子。

@GetMapping("/")
public String index(@AuthenticationPrincipal Jwt jwt) {
    return String.format("Hello, %s!", jwt.getSubject());
}