0

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

hola a todos como ven me sale un error y no se como solucionarlo, solo envio mi url absoluta al fetch y luego paso el formData intente solucionarlo con este codigo de aqui abajo pero no resulta... estoy utilizando ese codigo dentro de una funcion async

const res = await fetch(self.url, {
    method: 'POST',
    'Access-Control-Allow-Origin': location.origin,
    credentials: 'same-origin',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: formData
});

3 respuestas 3

1

Respuesta corta:

  • Estás haciendo un fetch a un backend https desde un frontend http. Eso cuenta como un request cross-domain, y tu backend no está configurado para ese tipo de peticiones.

Usa https en tu front o modifica tu llamado para pedir http al backend.

Respuesta larga:

Además de hacer el request entre protocolos distintos, veo otros dos parámetros mal puestos y uno que puede llevar a errores.

1.- Header "allow-origin" como atributo

'Access-Control-Allow-Origin': location.origin,

No es un atributo del llamado Fetch. Es un header, pero tampoco tiene sentido hacer:

headers: {
    'Access-Control-Allow-Origin': location.origin
}

Porque es un header de respuesta. Tiene que enviarlo el receptor del llamado a un request de tipo OPTIONS para señalar que acepta el envío CORS. (no necesitas enviar el OPTIONS, el preflight lo hace el browser cuando haces tu request igual que ahora)

2.- Inclusión de credenciales

credentials: 'same-origin'

Si el destino está en tu mismo host, entonces ese es el comportamiento por defecto. Se enviarán tus credenciales (en la forma de cookies) junto con el llamado. Si fuera un request cors, entonces tendría que usar credentials: 'include' lo cual sólo funcionará si el backend devuelve el header Access-Control-Allow-Credentials: true.

3.- Content-Type explícito (posible problema, improbable)

Si tu content type es application/x-www-form-urlencoded no es necesario declararlo. Sin embargo en tu pregunta dice que el body es formData. ¿Estás instanciando un objeto formData tú mismo? Posiblemente el content-type debiera ser multipart/form-data.

En general cuando sea un safe-type ("application/x-www-form-urlencoded", "multipart/form-data", "text/plain") puedes omitirlo porque sin importar lo que pongas manda el mimetype que detecte el backend. Sí es importante declararlo, en cambio, si fuera JSON, dado que hay una diferencia entre enviar application/json (unsafe) vs enviar un request json que constituye una excepción a la norma. No es tu caso.

0

No es problema de tu javascript, sino del backend https://spd.test/backend/index.php por la extensión de la URL asumo que estas trabajando con PHP, en tu script debes agregar esto al principio:

header("Access-Control-Allow-Origin: *");

Esto se hace porque hay una medida de seguridad que no permiten que se realicen peticiones asíncronas de un dominio a otro y con ese código das permiso.

0

En efecto, el problema es CORS, puedes cambiar tu backend y agregar el header Access-Control-Allow-Origin: * sin embargo, eso haría un poquito más vulnerable tu sitio web a ataques XSS y otros exploits que justamente CORS busca limitar.

En este caso, te propongo la solución de usar rutas relativas si las rutas a las que harás la petición son las de tu propio sitio o bien, estandarizar todo a ya sea http o a https (de preferencia a https) pues me parece que el error surge porque desde http://sdp.test estás haciendo una petición a https://sdp.test (son diferentes). El código para realizar la petición me parece que es correcto solo sería cambiar la variable self.url a cualquiera de los 2 valores:

  • http://sdp.test/backend/index.php
  • /backend/index.php (que al final terminará siendo la opción de arriba si la petición se origina desde http://sdp.test como es el caso de la imagen)

Espero haberte ayudado.

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.