Estoy intentando usar HttpClient para obtener un retorno json de un archivo que he bloqueado usando htaccess y htpasswd en mi servidor web. Puedo ejecutar la solicitud de obtención/publicación en el cartero con el encabezado de Autorización y vuelve bien. Cuando lo ejecuto en angular, aparece el error en el título junto con un error 401.
Aquí está la función que activa HttpRequest
getConfig(): Observable<any> { return this.http.get('myurlhere/myfile.json', { responseType: 'json' }) }Aquí está mi interceptor, y sí, el archivo console.log se dispara y el registro del resultado muestra la solicitud con los encabezados adjuntos.
import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable() export class AuthInterceptor implements HttpInterceptor { constructor() { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { req = req.clone({ setHeaders: { 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXX' } }) console.log('INTERCEPTED') return next.handle(req); } }Hay muchos problemas similares aquí, pero nada parece estar funcionando. El retorno 401 está etiquetado como OPCIONES y he reconstruido lo que eso significa, simplemente no puedo encontrar una forma de evitarlo.
REVISIÓN Terminó siendo un problema del lado del servidor con la configuración de htaccess y CORS.
Header always set Access-Control-Allow-Origin "*" Header always set Access-Control-Allow-Methods: "GET,POST,OPTIONS,DELETE,PUT" Header always set Access-Control-Allow-Headers: "Authorization" <Files config.json> AuthType Basic AuthName "Authentication Required" AuthUserFile C:\xampp\htdocs\.htpasswd Options -Indexes <LimitExcept OPTIONS> Require valid-user </LimitExcept> </Files> ¡Necesitaba agregar el bloque LimitExcept , luego comenzó a funcionar!
Parece que hay un problema con la request , el objeto de request ( req ) es inmutable, por lo que debe definir una nueva propiedad y clonar la solicitud, luego actualizarla
import { Injectable } from '@angular/core'; import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor } from '@angular/common/http'; import { Observable } from 'rxjs'; @Injectable() export class AuthInterceptor implements HttpInterceptor { constructor() { } intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { const modifiedReq = req.clone({ setHeaders: { 'Authorization': 'Basic XXXXXXXXXXXXXXXXXXXXXXX' } }) console.log('INTERCEPTED') return next.handle(modifiedReq); // pass the modified request to the handle method } }consulte los documentos para obtener más información
Espero eso ayude