Question

我正在尝试从本地主机节点服务器获取数据，但仍然得到此“ JSON.parse：JSON数据第1行第1列的意外字符”。当我从https://randomuser.me/api/?results=10获取数据时，效果很好，但不适用于自己的JSON数组。

server.js （后端）

//RENDER HTML PAGE TO GET THE RESULTS
app.get('/device', isLoggedIn, function(req,res)
{
    fs.readFile('./public/list.html', 'utf8', (err, data)=> {
        res.write(data);
        res.end();
    });
});

//GENERATE MY JSON ARRAY
app.get('/mydevices', isLoggedIn, function(req,res)
{
    connection.query("\
        SELECT `dispositivos`.`nome` \
        FROM `dispositivos` JOIN `usuarios` \
        ON `usuarios`.`id` = `dispositivos`.`user_id` AND `user_id`='" + req.user.id + "'", (err,result)=>
    {
        res.json({'results': result});
        // console.log(result)
    });
});

controller.js （前端-不适用于我的JSON）

window.onload = function(){
  function createNode(element) {
      return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }

  const ul = document.getElementById('mydevices');
  const url = 'http://localhost:777/mydevices';
  fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let devices = data.results;
    return devices.map(function(device) {
      let li = createNode('li'),
          // img = createNode('img'),
          span = createNode('span');
      // img.src = device.picture.medium;
      span.innerHTML = `${device.nome}`;
      // append(li, img);
      append(li, span);
      append(ul, li);
    })
  })
  .catch(function(error) {
    console.log(error);
  });   
};

controller.js （前端-正在为randomuser.me API工作）

window.onload = function(){
  function createNode(element) {
      return document.createElement(element);
  }

  function append(parent, el) {
    return parent.appendChild(el);
  }

  const ul = document.getElementById('authors');
  const url = 'https://randomuser.me/api/?results=10';
  fetch(url)
  .then((resp) => resp.json())
  .then(function(data) {
    let authors = data.results;
    return authors.map(function(author) {
      let li = createNode('li'),
          img = createNode('img'),
          span = createNode('span');
      img.src = author.picture.medium;
      span.innerHTML = `${author.name.first} ${author.name.last}`;
      append(li, img);
      append(li, span);
      append(ul, li);
    })
  })
  .catch(function(error) {
    console.log(error);
  });   
};

在呈现的html中，我有id =“ devices”（当然，当我要使用randomuser API时，我将其更改为“ authors”）。

Answer 1

“ JSON数据第1行第1行的意外字符”始终表示结果不是JSON，而几乎始终表示（在网络环境中）您收到错误页面代替。

两个问题：

（主要问题。）您正在尝试发出跨域请求（向http://localhost:777，但我猜想是来自其他某个来源的http://localhost:80或类似的），但不会发出必要的CORS标头来启用从您发起呼叫的来源的呼叫。相反，https://randomuser.me启用来自所有来源的请求。
（不是主要问题。）您没有在检查请求是否成功。（在我看来）这是fetch API的失败，在这方面，它有一个强大的步枪，我几乎每天都在这里看到。（my blog post on it中的详细信息。）。添加：
```
.then(resp => {
    if (!resp.ok) {
        throw new Error(resp.status);
    }
})
```
...在您的.then(resp => resp.json())之前。

JSON.parse：从NodeJS服务器获取数据时出现意外字符

1 个答案: