Impossibile recuperare POST senza no-cors nell'intestazione

Question

Al momento di effettuare richiesta del genere:

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

richiesta esecuzione con opzioni di metodo, invece POST. Solo in modalità aggiungendo: richiesta POST diventare 'no-cors':

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

ma la risposta non è ok che (anche se lo stato di risposta della rete è 200): {type: "opaco", url: "", lo stato : 0, ok: false, statusText: "" ...} suppongo perché

il solo valori consentiti per l'intestazione Content-Type sono: application/x-www-form-urlencoded multipart/form- data text/plain

descritto qui https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

È in qualche modo possibile riportare in vita dati POST json con fetch?

Answer 1

L'intestazione personalizzata Content-Type si sta inviando cause tua richiesta di essere preflight, il che significa una richiesta OPTIONS, che contiene alcuni metadati per la richiesta POST che sta per essere spedito, sarà inviato prima la richiesta POST vero e proprio.

Il server deve essere preparato per gestire questa richiesta OPZIONI. Non hai specificato ciò che il server è scritto in, ma con espresso, per esempio, è possibile registrare un middleware che intercetta le richieste tutte le 'Opzioni', imposta le intestazioni Access-Control-Allow-Origin: * e Access-Control-Allow-Headers: Content-Type, e risponde con 200.

Se è possibile per voi di effettuare la richiesta utilizzando un 'Content-Type': intestazione 'text/plain', che risolverebbe il tuo problema. In alternativa puoi usare qualcosa che ignora interamente XHR, come JSONP.

Answer 2

Se si dispone di alcun controllo su server che si può provare questo:

http://cors-anywhere.herokuapp.com/