web-dev-qa-db-ja.com

Content-TypeヘッダーがAngular $ httpで設定されていません

次のコードでPOST $ httpを使用して、クロスオリジンAngularリクエストを作成しようとしています。

//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
});

プリフライトOPTIONSリクエストは200 OKを取得しますが、後続のPOSTは400 Bad Request応答を受信します。Chromeのデバッグウィンドウのトレースを見ると、POSTのContent-Type: application/x-www-form-urlencoded; charset=UTF-8ヘッダーが表示されていません。これはサーバーが不正な要求応答を返す理由。

上記のコードから省略した他のカスタムヘッダーをいくつか設定していますが、それらは正常に送信および表示されています。

また、Advanced Rest Clientアプリを使用してChromeでこのリクエストを実行し、正しい応答を受信できることにも言及する必要があります。（アクセストークン）

ストレートアップのXMLHttpRequest（）を実行しようとしましたが、同じエラーが発生します。

Content-Typeヘッダーが設定されていない理由について何か洞察はありますか？

angularjshttp-headersxmlhttprequestcors
7
user3783608

Content-Typeヘッダーは、データを送信していない場合に送信されます。 dataオブジェクトを追加して、試してみてください。

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

また、通常、投稿ではdata（get）の代わりにparamsを使用します。

必要に応じて、データを変換する方法についての詳細が記載されているこのSO質問）を参照することもできます。 リクエストペイロードの代わりにフォームデータとしてデータを投稿するにはどうすればよいですか？ ？

11
lucuma

データプロパティが定義されていない場合、「Content-Type」ヘッダーはリクエストに追加されません。たとえば、空の文字列をデータ「」として送信できます。

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

ヘッダーを設定しているときに、同じ問題に直面します。このように$httpリクエストでデータパラメータを送信する必要があります

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

空白のデータを送信することもできます。それはうまくいくでしょう。

1
Santosh Kanan

私の問題は、data変数を文字列ではなくオブジェクトに設定していたことでした。

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

data:'key1=value1&key2=value2'に変更すると、正常に機能しました。そこにはバックスラッシュもあり、手動で%5cコードを入力する必要がありました。

1
user3783608

あなたよりも「リランB」あなたの修正は私にとってチャンピオンのように機能しました....問題は数時間から私を悩ませていました....

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

  $http(req);
1
prashanth yet