1

Actualmente tengo un proyecto en, React para el Frontend y Nodejs con SQLserver para el backend, realmente el problema viene dado por Cors ya que tengo hosteado ambos en un devtunnel de microsoft. Declare posibles origenes de solicitudes en el servidor:

const CorsOrigins = [     
    "http://localhost:3001",
    "http://localhost:3000",
    "https://******.use2.devtunnels.ms:3000",
    "http://localhost:5500"
]

export default CorsOrigins

y mi configuracion de Cors en el servidor es:

app.use(
  cors({
    origin: (origin, callback) => {      
      if (CorsOrigins.includes(origin){
        callback(null, origin); // Permite el origen
      } else {
        callback(new Error("Not allowed by CORS")); // Bloquea otros orígenes
      }
    },
    credentials: true,
    methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
    allowedHeaders: ["Origin", "X-Requested-With", "Content-Type", "Accept"]
  })
);

aun asi cuando intento ingresar desde mi devtunnel el servidor lee como si estuviera realizando la solicitud desde localhost y niega la solicitud, mas sin embargo si coloco directamente la ip con mi devtunnel si funciona con normalidad pero quiero hacerlo mas flexible para subdominios en un futuro.

Error por navegador:

xxxxxxx.use2.devtunnels.ms/:1 Access to XMLHttpRequest at >>'https://xxxxxxx.use2.devtunnels.ms:5500/api/clientes' from origin >>'https://xxxxxxx.use2.devtunnels.ms:3000' has been blocked by CORS policy: The 'Access->>Control-Allow-Origin' header has a value 'http://localhost:5500' that is not equal to the supplied origin

Realmente no doy con el problema, no se si estoy interpretando correctamente las solicitudes o es algun tipo de problema al utilizar Devtunnels

3 respuestas 3

0

CORS es un sistema para evitar ataques cross-origin, por lo que el dominio declarado y el usado tienen que coincidir al 100%.

El mensaje de error lo deja claro: http://localhost:5500 no es lo mismo que https://xxxxxxx.use2.devtunnels.ms:5500. Añade ese dominio y puerto y debería funcionar

1
  • Estoy utilizando el Array de CorsOrigins para definir todos los posibles origenes y esperaba que al llegar la solicitud el revisara de donde viene y si el origen esta dentro del array lo permitiera Commented el 26 oct. a las 13:53
0

Leyendo ya la configuración y documentación de devtunnels de microsoft hay dos propiedades, llamadas origin-header y host-header, que si no las configuras como "unchanged" esta se renombran como "Localhost:Puerto" entonces a pesar de tener la lista de orígenes había conflicto entre la request del navegador a como llegaba al servidor. Al poner ambas como unchanged se mantiene y funciona la configuración tal cual se creo.

0

CORS no acepta wildcards https://fetch.spec.whatwg.org/#access-control-allow-origin-response-header excepto * de manera que al poner

  https://******.use2.devtunnels.ms:3000

esto no calza con

  https://xxxxxx.use2.devtunnels.ms:3000

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.