如何解决 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中文网其他相关文章！