es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Configure la política CORS para Spring Cloud Gateway.

01 Aug, 2023 Programación

Tengo Spring Cloud Gateway en ejecución en un servidor separado con la siguiente configuración:

spring:
  cloud:
    gateway:
      globalcors:
        cors-configurations:
          '[/*]': 
            allowedOrigins: "http://localhost:3000"
            allowedMethods:
              - GET
              - POST

Pero cada vez que intento desde la aplicación React, obtengo lo siguiente:

El acceso a XMLHttpRequest en ‘http://11.1.1.1:8080/api/support/tickets/create’ desde el origen ‘http://localhost:3000’ ha sido bloqueado por la política de CORS: La respuesta a la solicitud preflight no pasó el control de acceso: No hay encabezado ‘Access-Control-Allow-Origin’ presente en el recurso solicitado.

¿Sabes cómo se puede solucionar este problema para Spring Boot 2.6.2/Spring Cloud 2021.0.0?

Código completo: http://www.github.com/rcbandit111/SpringCloudGateway_POC

Solicitud POST:

URL de la solicitud: http://1.1.1.1:8080/api/merchants/onboarding/bank_details
Política de referencia: strict-origin-when-cross-origin
Aceptar: application/json, text/plain, */*
Content-Type: application/json
Referer: http://localhost:3000/
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Carga útil de la solicitud POST:
{"currency":"HNL","iban":"dssvsdvsdv"}

Solicitud OPTIONS:

URL de la solicitud: http://1.1.1.1:8080/api/merchants/onboarding/bank_details
Método de la solicitud: OPTIONS
Código de estado: 403 Prohibido
Dirección remota: 1.1.1.1:8080
Política de referencia: strict-origin-when-cross-origin

Respuesta:

HTTP/1.1 403 Prohibido
Vary: Origin
Vary: Access-Control-Request-Method
Vary: Access-Control-Request-Headers
content-length: 0

Encabezados de solicitud OPTIONS:

OPTIONS /api/merchants/onboarding/bank_details HTTP/1.1
Host: 1.1.1.1:8080
Connection: keep-alive
Accept: */*
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36
Sec-Fetch-Mode: cors
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema está relacionado con la política de CORS (Compartir recursos de origen cruzado). Parece que la aplicación de React está intentando acceder al punto final de la API en un dominio diferente (http://1.1.1.1:8080) al que fue cargada desde (http://localhost:3000), y el servidor no incluye los encabezados CORS necesarios en la respuesta para permitir esto.

    Para resolver este problema, debes configurar el Spring Cloud Gateway para que incluya los encabezados CORS necesarios en la respuesta. La configuración globalcors que has agregado es correcta, pero debes asegurarte de que se aplique correctamente a las rutas que lo requieran.

    De acuerdo a tu código en GitHub, has definido las siguientes rutas:

    spring:
  cloud:
    gateway:
      routes:
        - id: onboarding-bank-details
          uri: lb://ONBOARDING-SERVICE
          predicates:
            - Path=/api/merchants/onboarding/bank_details/**
          filters:
            - RewritePath=/api/merchants/onboarding/bank_details/(?<remaining>.*), /$\{remaining}

    Para aplicar la configuración CORS a esta ruta, debes agregar el filtro GlobalCorsProperties a la lista de filtros:

    spring:
  cloud:
    gateway:
      routes:
        - id: onboarding-bank-details
          uri: lb://ONBOARDING-SERVICE
          predicates:
            - Path=/api/merchants/onboarding/bank_details/**
          filters:
            - RewritePath=/api/merchants/onboarding/bank_details/(?<remaining>.*), /$\{remaining}
            - name: CorsGlobalFilter
              args:
                corsConfigurations:
                  '[/**]': # actualizar de '[/*]' a '[/**]'
                    allowedOrigins: "http://localhost:3000"
                    allowedMethods:
                      - GET
                      - POST

    Esto agregará el filtro GlobalCorsProperties a la ruta y aplicará la configuración CORS a todas las solicitudes que coincidan con la ruta /api/merchants/onboarding/bank_details/**.

    Después de realizar este cambio, deberías poder acceder al punto final de la API desde la aplicación de React sin obtener más errores de CORS.

Comments are closed.