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.