ejemplos - formularios reactivos angular 5

Dos llamadas que se activan al hacer clic en la solicitud de publicación usando HttpClient

Question

Esta pregunta ya tiene una respuesta aquí:

• duplicar llamadas ajax en angularjs 2 respuestas

Después de agregar encabezados dentro del código, se está produciendo una llamada duplicada. encuentra la imagen para ver que la llamada ocurre dos veces.

auth-interceptor.ts

clase de exportación AuthInterceptor implementa HttpInterceptor {

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    const clonedRequest = req.clone({
        headers: req.headers.set(''X-CustomAuthHeader'', ''some-auth-token'')
    });

    console.log("new headers", clonedRequest.headers.keys());

    return next.handle(clonedRequest);
}

}

Por favor, multa la imagen de registro de llamadas aquí ..

registro de llamadas 1

registro de llamadas 2

Answer 1

Este tipo de solicitud se denomina solicitudes Preflighted que corresponde a una negociación entre la persona que llama y la aplicación web basada en encabezados HTTP.

Consiste de dos fases:

1. El navegador ejecuta una solicitud de OPCIONES con la misma URL que la solicitud de destino para verificar que tenga los derechos para ejecutar la solicitud. Esta solicitud OPTIONS devuelve encabezados que identifican qué es posible hacer para la URL.

2. Si los derechos coinciden, el navegador ejecuta la solicitud.

Referencia aquí .

Answer 2

La primera llamada se desencadena por Intercambio de recursos de origen cruzado (CORS)

En primer lugar, envía una solicitud de OPCIÓN para verificar si el dominio desde el que se envía la solicitud es el mismo que el del servidor.

Tenga en cuenta que si agrega autenticación a la solicitud utilizando el encabezado Autenticación, las solicitudes simples se convierten automáticamente en las que están preflighted.

Vea también el artículo útil para más información.