web-dev-qa-db-fra.com

Impossible de récupérer POST sans corsation dans l'en-tête)

En faisant une demande comme ça:

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))

demande en cours d'exécution avec la méthode OPTIONS à la place de POST. Seulement en mode ajout: la requête 'no-cors' devient 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))

mais la réponse n’est pas ok que (même si le statut de réponse du réseau est 200): {type: "opaque", url: "", statut: 0, ok: faux, statusText: ""…} je le suppose parce que

Les seules valeurs autorisées pour l'en-tête Content-Type sont les suivantes: application/x-www-form-urlencoded multipart/form-data text/plain

décrit ici https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Y a-t-il moyen de faire vivre POST json data avec fetch?

javascriptcorsfetch-api
25
htochko

La douane Content-Type _ l'en-tête que vous envoyez provoque le contrôle en amont de votre demande, ce qui signifie qu'une demande OPTIONS, contenant des métadonnées sur la demande POST qui est sur le point d'être envoyée, sera envoyée avant la demande réelle POST.

Votre serveur doit être prêt à traiter cette demande OPTIONS. Vous n'avez pas spécifié le type d'écriture du serveur, mais avec express par exemple, vous pouvez enregistrer un middleware qui intercepte toutes les requêtes 'OPTIONS', définit le Access-Control-Allow-Origin: * et Access-Control-Allow-Headers: Content-Type en-têtes et répond avec 200.

S'il vous est possible de faire la demande en utilisant un en-tête 'Content-Type': 'text/plain', cela résoudra votre problème. Sinon, vous pouvez utiliser quelque chose qui contourne complètement XHR, comme JSONP.

33
Asad Saeeduddin

Lorsque vous utilisez non-cors, Tous les en-têtes doivent être valides simples-en-têtes. Les seules valeurs valides pour l'en-tête content-type Pouvant être qualifiées de simple-header sont les suivantes:

headers: [
  ['Content-Type', 'application/x-www-form-urlencoded'],
  ['Content-Type', 'multipart/form-data'],
  ['Content-Type', 'text/plain'],
]

Exceptions avec éventualités: 

headers: [
  ['Content-Type', 'application/csp-report'],
  ['Content-Type', 'application/expect-ct-report+json'],
  ['Content-Type', 'application/xss-auditor-report'],
  ['Content-Type', 'application/ocsp-request'],
]
0
sdc