Intestazione Content-Type non impostata con Angular $ http

Question

Sto provando a fare una richiesta POST cross-origin usando Angular $ http con il seguente codice.

//I've tried setting and removing these http config options 
$http.defaults.useXDomain = true; 
delete $http.defaults.headers.common['X-Requested-With']; 
$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded'; 

//Basic request, with some private headers removed 
return $http({ 
    method: 'POST', 
    //withCredentials:true, 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}, 
    params: params, 
    url: url 
}); 

La richiesta Opzioni Preflight ottiene un 200 OK, ma la successiva POST riceve una risposta 400 Bad Request. Osservando la traccia nella finestra di debug di Chrome, non vedo un'intestazione Content-Type: application/x-www-form-urlencoded; charset=UTF-8 per il POST. Presumo che questo è il motivo per cui il server sta restituendo una risposta Bad Request.

Sto impostando alcune altre intestazioni personalizzate che ho omesso dal codice sopra, e vengono inviate e visualizzate correttamente.

Devo anche menzionare che posso fare questa richiesta utilizzando l'app Advanced Rest Client per Chrome e ricevere la risposta corretta. (Un token di accesso)

Ho anche provato a fare un semplice XMLHttpRequest(), ma ottengo gli stessi errori.

Qualche idea sul perché l'intestazione Content-Type non viene impostata?

Answer 1

Non sono sicuro che l'intestazione Content-Type verrà inviata se NON si inviano dati. Aggiungere un oggetto data e provarlo:

return $http({ 
    method: 'POST', 
    //withCredentials:true, 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}, 
    data: data, 
    url: url 
}); 

Inoltre, di solito con un post si utilizza data invece di params (ottenere).

È inoltre possibile fare riferimento a questo SO domanda che ha un po 'di informazioni su come trasformare i dati se è necessario: How can I post data as form data instead of a request payload?

Answer 2

Il mio problema era che stavo impostando la variabile data a un oggetto invece di una stringa .

return $http({ 
    method: 'POST', 
    //withCredentials:true, 
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}, 
    data: {'key1':'value1', 'key2':'value2'}, 
    url: url 
}); 

Una volta modificato in data:'key1=value1&key2=value2' ha funzionato correttamente. C'era anche un backslash che dovevo inserire manualmente nel codice %5c.

Answer 3

L'intestazione 'Content-Type' non viene aggiunta alla richiesta se la proprietà data non è definita, è possibile inviare una stringa vuota come dati "" ad esempio.

var req = { 
       method: 'GET', 
       url: '<your url here>', 
       //headers: { 
       // 'Content-Type': 'application/json;charset=utf-8' 
       //}, 
       data: "" 
      }; 
    $http(req); 

Answer 4

Than you very much "Liran B" il fix ha lavorato come un campione per me .... problema mi è stato bugging da alcune ore ....

var req = { 
       method: 'GET', 
       url: '<your url here>', 
       //headers: { 
       // 'Content-Type': 'application/json;charset=utf-8' 
       //}, 
       data: "" 
      }; 

    $http(req); 

Answer 5

mi trovo di fronte lo stesso problema , mentre si impostano le intestazioni. abbiamo bisogno di inviare i dati dei parametri nella richiesta $http come questo

$http({ 
    method: 'POST', 
    headers: { 'Content-Type': 'application/json}, 
    data: {}, 
    url: url 
}); 

siamo in grado di inviare i dati in bianco anche. funzionerà bene.