origin - javascript fetch syntax

No se puede obtener POST sin corchetes en el encabezado

Question

Al hacer la solicitud de esa manera:

return fetch(
''http://localhost:8000/login'',
{ method: ''POST'',
headers: new Headers(
{"Content-Type": "application/json",
"Accept":"application/json"}
),
body: JSON.stringify(
{''name'': ''Tom'', ''password'': ''Soyer''}
)
}
).then( response => { console.log(response);})
.catch(err => console.log(err))

Solicite ejecutar con el método OPCIONES en lugar de POST. Solo en el modo de adición: la solicitud ''no-cors'' se convierte en POST:

return fetch(
''http://localhost:8000/login'',
{ method: ''POST'',
mode: ''no-cors'',
headers: new Headers(
{"Content-Type": "application/json",
"Accept":"application/json"}
),
body: JSON.stringify(
{''name'': ''Tom'', ''password'': ''Soyer''}
)
}
).then( response => { console.log(response);})
.catch(err => console.log(err))

pero la respuesta no es correcta que (incluso si el estado de respuesta de la red es 200): {escriba: "opaco", url: "", estado: 0, ok: falso, estado del texto: ""…} Supongo que porque

Los únicos valores permitidos para el encabezado Content-Type son: application / x-www-form-urlencoded multipart / form-data text / plain

descrito aquí https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

¿Hay alguna manera de llevar a los datos POST json en vivo con fetch?

Answer 1

El encabezado de Content-Type personalizado que está enviando hace que su solicitud se verifique previamente, lo que significa que una solicitud de OPCIONES, que contiene algunos metadatos sobre la solicitud POST que está a punto de enviarse, se enviará antes de la solicitud POST real.

Su servidor debe estar preparado para lidiar con esta solicitud de OPCIONES. No ha especificado en qué está escrito el servidor, pero con Express, por ejemplo, puede registrar un middleware que intercepte todas las solicitudes de ''OPCIONES'', establezca Access-Control-Allow-Origin: * y Access-Control-Allow-Headers: Content-Type , y responde con 200.

Si puede realizar la solicitud utilizando el encabezado ''Tipo de contenido'': ''texto / sin formato'', eso resolvería su problema. Alternativamente, podrías usar algo que evite XHR por completo, como JSONP.