REST API - バニラのPOSTメソッドJavaScript/AJAX - エラー400（不正リクエスト）

Question

バニラJS（jQueryなし）でPOSTメソッドを動作させる方法を教えてください。

私はこのコードでそれをやろうとしています：

var call = 
{ 
    "filterParameters": { 
    "id": 18855843, 
    "isInStockOnly": false, 
    "newsOnly": false, 
    "wearType": 0, 
    "orderBy": 0, 
    "page": 1, 
    "params": { 
     "tId": 0, 
     "v": [] 
    }, 
    "producers": [], 
    "sendPrices": true, 
    "type": "action", 
    "typeId": "", 
    "branchId": "" 
    } 
}; 
var xhr = new XMLHttpRequest(); 

xhr.open('POST', 'https://www.alza.cz/Services/RestService.svc/v2/products'); 
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
xhr.onload = function() { 
    if (xhr.status === 200) { 
     console.log('OK ' + xhr.responseText); 
    } 
    else if (xhr.status !== 200) { 
     console.log('Request failed. Returned status of ' + xhr.status); 
    } 
}; 
xhr.send(call); 

、常にエラー400（不正な要求）を取得。 私はjQueryでそれを呼び出そうとしましたが、それは動作していますが、私はそれを普通のJSで動作させる必要があります。

どうしてうまくいかないのですか？これは、サーバーのデータにアクセスするAJAXのJavaScriptコードを遮断するアクセス制御 - 許可 - 起源の応答です

addData({ 
    "filterParameters": { 
    "id": 18855843, 
    "isInStockOnly": false, 
    "newsOnly": false, 
    "wearType": 0, 
    "orderBy": 0, 
    "page": 1, 
    "params": { 
     "tId": 0, 
     "v": [] 
    }, 
    "producers": [], 
    "sendPrices": true, 
    "type": "action", 
    "typeId": "", 
    "branchId": "" 
    } 
} 
); 

function addData(data){// pass your data in method 
    $.ajax({ 
      type: "POST", 
      url: "https://www.alza.cz/Services/RestService.svc/v2/products", 
      data: JSON.stringify(data),// now data come in this function 
      contentType: "application/json; charset=utf-8", 
      crossDomain: true, 
      dataType: "json", 
      success: function (data, status, jqXHR) { 

       console.log(data);// write success in " " 
      }, 

      error: function (jqXHR, status) { 
       // error handler 
       console.log(jqXHR); 
       alert('fail' + status.code); 
      } 
      }); 
    } 

Answer 1

あなたがapplication/json
あなたは間違っているFORMDATAとしてJSONデータを掲載しているにcontent-typeヘッダを設定する必要があります

xhr.setRequestHeader('Content-Type', 'application/json');

相続人が使用して実施例である（あなたのオブジェクトを文字列化するために忘れてしまったの横）新しいバニラjsがAPIフェッチ

var result = null 

fetch("https://www.alza.cz/Services/RestService.svc/v2/products", { 
    method: "POST", 
    body: JSON.stringify({ 
    "filterParameters": { 
     "id": 18855843, 
     "isInStockOnly": false, 
     "newsOnly": false, 
     "wearType": 0, 
     "orderBy": 0, 
     "page": 1, 
     "params": { 
     "tId": 0, 
     "v": [] 
     }, 
     "producers": [], 
     "sendPrices": true, 
     "type": "action", 
     "typeId": "", 
     "branchId": "" 
    } 
    }), 
    headers: {"content-type": "application/json"}, 
    //credentials: 'include' 
}) 
.then(function(res) { 
    if (res.ok) { // ok if status is 2xx 
    console.log('OK ' + res.statusText); 
    } else { 
    console.log('Request failed. Returned status of ' + res.status); 
    } 

    return res.blob() 
}) 
.then(function(blob) { 
    result = blob 
    // window.result = blob 
}) 

Answer 2

：

は、チェックのために、ここでのjQueryで作業コードです。サーバーがあなたによって制御されていない場合は、データを取得してからWebページにリダイレクトできる別のサーバーが必要です。

Answer 3

だから、僕はxhr.send()

を試してみましたが、私は空白のタブでこれをしようとした場合、それは実際に動作しかし

XMLHttpRequest cannot load https://www.alza.cz/Services/RestService.svc/v2/products. Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://www.alza.cz' that is not equal to the supplied origin. 

を得ました。 あなたはこのURLからJSを実行しようとしていますか？

空白のタブからJSを実行してみてください。