0

Tengo una APP que estoy desarrollando en ANGULAR v16 + LARAVEL v10 que tiene que consumir una API que desarrollé en PHP, el problema se presenta cuando tengo que consumir esta API, me devuelve el error de CORS y esto es en el ambiente de desarrollo local.

He estado buscando las posibles razones y lo que tengo que hacer para solucionar este problema. Por el lado de la API, tengo esto directamente en el '.htaccess':

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [QSA,L]
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-Requested-With, X-Auth-Token, Content-Type, Origin, Cache-Control, Pragma, Authorization, Accept, Accept-Encoding, X-Login-Origin, responseType"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"

Y de lado del 'backend', es decir, de LARAVEL he colocado tambien esto:

Route::group(['middleware' => 'cors'], function () {

    Route::get('/getrecordset', [IncidentsController::class, 'getData']);
    Route::get('/getdataset', [IncidentsController::class, 'getDataSet']);
});

El middleware que busque en Internet sobre estos temas es el siguiente: 'Cors_II.php'

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;
use Symfony\Component\HttpFoundation\Response;

class Cors_II
{
    /**
     * Handle an incoming request.
     *
     * @param  \Closure(\Illuminate\Http\Request): (\Symfony\Component\HttpFoundation\Response)  $next
     */
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);

        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, DELETE, OPTIONS');
        $response->headers->set('Access-Control-Allow-Headers', 'Origin, Content-Type, X-Auth-oken, Authorization, Accept, charset, boundary, Content-Lenght');
        $request->header('Access-Control-Request-Headers');

        return $response;
    }
}

Y este mismo es el que inserto en el 'Kernel.php'

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;
use App\Http\Middleware\Cors_II;

class Kernel extends HttpKernel
{
    /**
     * The application's global HTTP middleware stack.
     *
     * These middleware are run during every request to your application.
     *
     * @var array<int, class-string|string>
     */
    protected $middleware = [
        // \App\Http\Middleware\TrustHosts::class,
        \App\Http\Middleware\TrustProxies::class,
        // \Illuminate\Http\Middleware\HandleCors::class,
        Cors_II::class,
        \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
        \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
        \App\Http\Middleware\TrimStrings::class,
        \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    ];

Y con todo lo anterior, obtengo este error:

Error CORS

el error es este:

OPTIONS 127.0.0.1/ws-cntpq/depts Estado 400 Bad Request VersiónHTTP/1.1 Transferido498 B (tamaño 0 B) Política de referenciastrict-origin-when-cross-origin Resolución de DNSSistema

Mucho agradecería me pudieran orientar al respecto, de antemano, gracias.

Oscar

7
  • Se requiere el error como tal, no una imagen de este.
    – Excorpion
    Commented el 11 nov. a las 0:59
  • LA imagen es explicita como tal, el error es este: OPTIONS 127.0.0.1/ws-cntpq/depts Estado 400 Bad Request VersiónHTTP/1.1 Transferido498 B (tamaño 0 B) Política de referenciastrict-origin-when-cross-origin Resolución de DNSSistema
    – oscarry77
    Commented el 11 nov. a las 1:48
  • De nuevo, no se aceptan imagenes, debes poner el error como tal. La quitare para que subas el error EN TEXTO.
    – Excorpion
    Commented el 11 nov. a las 2:47
  • @oscarry77 "LA imagen es explicita como tal" -> No es cuestión de explicitud de la imagen. No todo el mundo puede ver las imágenes bien, hay gente que usa SO en dispositivos con pantallas pequeñas o incluso con lectores de pantalla, las imágenes NO son aceptables cuando representan texto. Por qué ibas a pasar una imagen de un texto y hacerme abrirla para verla bien cuando si hubieses puesto el texto directamente puedo leerlo sin más? Por comodidad? Pues por comodidad nosotros elegimos no responderte y listo, no te parece?? Vienes a pedir ayuda, como mínimo respeta las reglas.
    – Benito-B
    Commented el 11 nov. a las 8:26
  • 1
    @Excorpion al borrar la imagen dejaste sin contexto la pregunta.
    – clay
    Commented el 11 nov. a las 15:01

1 respuesta 1

-1

Encontre el problema y esta aqui:

Object { normalizedNames: Map(0), lazyUpdate: (1) […], headers: Map(0), lazyInit: {…} }
​
headers: Map { "cntpq-407h" → (1) […] }
​​
size: 1
​​
<entries>
​​​
0: "cntpq-407h" → Array [ "P#$~wqwn7aoxo-nNJT~xD!wkFs-wdq" ]
​​
<prototype>: Map.prototype { … }
​
lazyInit: null
​
lazyUpdate: null
​
normalizedNames: Map { "cntpq-407h" → "CnTpQ-407H" }
​​
size: 1
​​
<entries>
​​​
0: "cntpq-407h" → "CnTpQ-407H"

Lo anterior es lo que obtengo al estar validando lo que se va llenando en las variables desde el ANGULAR (console.log) y es que requiero enviar estos valores en la cabecera de la solicitud:

0: "cntpq-407h" → Array [ "P#$~wqwn7aoxo-nNJT~xD!wkFs-wdq" ]

Y es porque pretendo validar la solicitud para que no pueda ser consumida desde cualquier parte, y al observar la seccion (del consoo.log) observo que se 'normaliza' de una forma como no la necesito que es:

normalizedNames: Map { "cntpq-407h" → "CnTpQ-407H" }

Y eso es lo que se va a la cabecera y al estar debugueando la API, oservo que solo llega un valor de 'Access-Control-Request-Headers = "cntpq-407h"', ¿Como puedo enviar esos 2 valores en la cabecera?

Gracias.

5
  • 1
    Esto debería de ser una respuesta... estás confundiendo SOes con un "foro". Esto no es un FORO es un sitio de preguntas y respuestas... Si quieres responder a tu pregunta, hazlo. Si lo que quieres es añadir información, hay un enlace debajo de la misma que pone "EDITAR", te sugiero que lo uses y muevas esta información allí, borrando esta "respuesta" que no responde a la pregunta si no que plantea otra. Otra opción, deja esto como respuesta, acéptalo como tal (importante), pero edita la parte donde preguntas otra cosa y abre una pregunta nueva
    – Benito-B
    Commented el 11 nov. a las 8:28
  • 1/ http/2 requiere que los nombres de los campos en headers vayan en minuscula rfc-editor.org/rfc/rfc7540#section-8.1.2 . en versiones previas el nombre del campo a enviar podia tener mayusculas y minusculas ( caseinsensitive ) en tal caso se suele utilizar CamelCase : Content-Type = content-type . la normalización que ves ahí es para aprovechar el http/2 CnTpQ-407H pasa a ser cntpq-407h ( el valor no cambia, sólo el nombre ) Commented el 12 nov. a las 17:06
  • 2/ en la imagen de la pregunta original el origin y el host son diferentes a título de cors. uno es localhost el otro es 127.0.0.1 Commented el 12 nov. a las 17:07
  • No entiendo si esto es una respuesta o una pregunta...
    – gbianchi
    Commented el 16 nov. a las 22:26
  • 1
    Si tienes una nueva pregunta, la puedes formular haciendo clic en el botón Formular una pregunta. Incluye un enlace a esta pregunta si ayuda a proporcionar contexto. - Desde revisión Commented el 17 nov. a las 17:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.