FormData 在 Angular 和 Http 攔截器中不起作用

Question

您好，我正在嘗試使用帶有 Bearer 令牌的 httpInterceptor 將 http post formData 發送到服務器。 但是 formData 不起作用。

const myheader = new HttpHeaders();
myheader.set('Content-Type', 'application/x-www-form-urlencoded');

const formData = new FormData();
formData.append('cart', 'hi');
formData.append('desc', this.cart.cartDesc);
formData.append('two', this.levelTwoData);
formData.append('main_cate', this.maincategory);
//formData.append('photo', this.imageData);

this.http.post<any>('http://localhost:8000/api/v1/cart/save/step1', formData, {
  headers: myheader
}).subscribe(response => {

});

如果有人有任何解決方案，請告訴我。 太感謝了。

Answer 1

我建議你使用這個 package: angular-oauth2-oidc試試這個：

應用程序模塊.ts：

import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        AppRoutingModule,
        HttpClientModule,
        RouterModule,
        OAuthModule.forRoot({
            resourceServer: {
                allowedUrls: ['https://localhost:5001', 'https://localhost:5443'],
                sendAccessToken: true,
            },
        }),
    ],
    providers: [
        {
            provide: HTTP_INTERCEPTORS,
            useClass: AuthInterceptor,
            multi: true,
        },
    ],
    bootstrap: [AppComponent],
})
export class AppModule {}

auth.interceptor.ts:

import { Injectable } from '@angular/core';
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http';
import { Observable } from 'rxjs';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
    constructor(private oauthService: OAuthService) {}

    intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
        if (this.oauthService.hasValidAccessToken()) {
            const headers = request.headers.set('Authorization', `Bearer ${this.oauthService.getAccessToken()}`);
            const authenticatedRequest = request.clone({ headers });
            return next.handle(authenticatedRequest);
        }

        return next.handle(request);
    }
}

Answer 2

我將從查看您尚未共享的攔截器代碼開始。