如何解決 Angular HTTP 標頭和 Go CORS 問題？

Angular HTTP 標頭和Go CORS 故障排除

CORS（跨源資源共享）在將Angular 應用程式連接到Go API 時通常是令人頭痛的問題。了解如何在 Angular 中新增授權標頭以及如何在 Go 中處理 CORS 對於兩者之間的成功通訊至關重要。

Angular 授權標頭

要在 Angular 中新增授權標頭，您應該使用 Http 攔截器。 Auth 攔截器的範例如下：

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    req = req.clone({
      setHeaders: {
        'Content-Type': 'application/json; charset=utf-8',
        'Accept': 'application/json',
        'Authorization': `Bearer ${AuthService.getToken()}`,
      },
    });
    return next.handle(req);
  }
}

在應用程式的模組中註冊攔截器：

providers: [
  {
    provide : HTTP_INTERCEPTORS,
    useClass: AuthInterceptor,
    multi   : true,
  },
],

Go CORS 處理

確保您的Go 程式碼允許來自Angular 應用程式的必要請求標頭：

headersOk := handlers.AllowedHeaders([]string{"*"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

如果問題仍然存在，請小心配置CORS 設定以符合客戶端的請求標頭。

已解決問題的範例

以下Angular 程式碼：

this.http.get<ProjectedBalance>(requestUrl, {headers: new HttpHeaders().set('Authorization', 'my-auth-token')})

與下列Go 程式碼結合：

headersOk := handlers.AllowedHeaders([]string{"Authorization"})
originsOk := handlers.AllowedOrigins([]string{"*"})
methodsOk := handlers.AllowedMethods([]string{"GET", "HEAD", "POST", "PUT", "OPTIONS"})

應該會成功建立Angular 應用程式和Go 之間的通訊API。

以上是如何解決 Angular HTTP 標頭和 Go CORS 問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！