使用Javascript读取JSON响应-问题

Question

我正在使用JSON和post方法将数据发送到服务器，但无法读取服务器的响应。这是我的代码：

var xhr = new XMLHttpRequest();
xhr.open("POST", "https://staging.smartenupcs.com/api/v1/licenses/create", true);
xhr.setRequestHeader("Smartenup-API-KEY", "webflow.c407d56c5ab23115af0075+DzDMrMtWZENCoct9Pa7DUA54mIgP8c9o");
var jsonStr = JSON.stringify({
  "first_name": "Bla",
  "last_name": "Blabla",
  "email": "bla@gmail.com",
  "product_name": "webflow_essentials",
  "order_id": 21811,
  "voucher": null

});
xhr.send(jsonStr);

xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    var myObj = JSON.parse(xhr.responseText);
    alert(myObj);
  }
};

我尝试了很多选择，但没有成功。

希望有人能帮助您，谢谢您

Answer 1

代码没有问题。

问题与跨域请求有关。您似乎是从staging.smartenupcs.com以外的其他域访问API，很可能是本地主机。

只需将跨域标头添加到服务器即可。

PS：当您的前端代码和api托管在同一个域中时，它将在没有跨域标头的情况下工作。

Answer 2

请在服务器端检查Access-Control-Allow-Origin标头。还要检查该API /操作的OPTIONS起飞前请求。之后，检查api响应状态和您的响应检查条件。

Answer 3

我建议使用fetch API代替XMLHttpRequest对象。

function postData(url = `UR_URL_HERE`, data = {}) {
  // Default options are marked with *
    return fetch(url, {
        method: "POST", // *GET, POST, PUT, DELETE, etc.
        mode: "cors", // no-cors, cors, *same-origin
        cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
        credentials: "same-origin", // include, *same-origin, omit
        headers: {
            "Content-Type": "application/json",
            // "Content-Type": "application/x-www-form-urlencoded",
        },
        redirect: "follow", // manual, *follow, error
        referrer: "no-referrer", // no-referrer, *client
        body: JSON.stringify(data), // body data type must match "Content-Type" header
    })
    .then(response => response.json()); // parses response to JSON
}