将数据从服务器发送到客户端答案

【问题标题】：send data from server to client将数据从服务器发送到客户端
【发布时间】：2021-12-07 17:27:28
【问题描述】：

你好，我从 axios 请求中获得了 JSON 数据，我想将它从服务器发送到客户端，我将其转换为 JSON 字符串，并使用 app.get 发送它，我尝试使用 HTML 脚本中的 fetch 来捕获它，但出现错误在浏览器中“未捕获（承诺中）SyntaxError：位置 1 处 JSON 中的意外标记 o 在 JSON.parse()" axios.get 正常工作并返回响应！我想我在服务器中的 app.get 或 index.html 中的 fetch() 有问题

server.js

const express = require('express');
const app = express();
app.listen(3000, );
app.use(express.static('public'));

const axios = require('axios')
const username = 'admin'
const password = 'admin'
const token = Buffer.from(`${username}:${password}`, 'utf8').toString('base64')
const urlLAMP_0 = 'http://127.0.0.1:8282/~/mn-cse/mn-name/LAMP_0/DATA/la'
const urlLAMP_1 = 'http://localhost:8282/~/mn-cse/mn-name/LAMP_1/DATA/la'
function getDataLAMP_0(){
  axios.get(urlLAMP_0, {
    headers: {
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Origin':'*',
      "X-M2M-RI":"OM2M-webpage",
      'Authorization': `Basic ${token}`,
      'Accept': 'application/json',
      'mode': 'cors',
      'credentials': 'include',
      }
  })
  .then(function(response) {
        const jsondata = JSON.stringify(response.data['m2m:cin']);
        app.get('/', (req, res)=>{
        res.send(jsondata)
        })
    return response;
  })
}

public/index.html

<title> LAMP DATA </title>

<style>
    * {
  font-family: sans-serif; 
}
h1 {
  color: #009879;
  font-size: 300%;
  text-align: center;;
}

.content-table {
  
  border-collapse: collapse;
  margin: 25px 0;
  font-size: 0.9em;
  min-width: 400px;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

.content-table thead tr {
  background-color: #009879;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

.content-table th,
.content-table td {
  padding: 12px 15px;
}

.content-table tbody tr {
  border-bottom: 1px solid #dddddd;
}

.content-table tbody tr:nth-of-type(even) {
  background-color: #f3f3f3;
}

.content-table tbody tr:last-of-type {
  border-bottom: 2px solid #009879;
}


</style>

<body>
    <h1> lamp Data </h1>
    <table class="content-table">
        <thead>
          <tr>
            <th>Name</th>
            <th>rn</th>
            <th>ty</th>
            <th>ri</th>
            <th>pi</th>
            <th>ct</th>
            <th>lt</th>
            <th>st</th>
            <th>cnf</th>
            <th>cs</th>
            <th>con</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>LAMP_0</td>
            <td><span id="rn0"></span></td>
            <td><span id="ty0"></span></td>
            <td><span id="ri0"></span></td>
            <td><span id="pi0"></span></td>
            <td><span id="ct0"></span></td>
            <td><span id="lt0"></span></td>
            <td><span id="st0"></span></td>
            <td><span id="cnf0"></span></td>
            <td><span id="cs0"></span></td>
            <td><span id="con0"></span></td>
          </tr>
          <tr>
            <td>LAMP_1</td>
            <td><span id="rn1"></span></td>
            <td><span id="ty1"></span></td>
            <td><span id="ri1"></span></td>
            <td><span id="pi1"></span></td>
            <td><span id="ct1"></span></td>
            <td><span id="lt1"></span></td>
            <td><span id="st1"></span></td>
            <td><span id="cnf1"></span></td>
            <td><span id="cs1"></span></td>
            <td><span id="con1"></span></td>
          </tr>
        </tbody>
      </table>
  <script>
    fetch('/')
    .then(function(response) {
      console.log(response)
      const jsondata = JSON.parse(response);
        document.getElementById("rn0").textContent = jsondata['m2m:cin'].rn;
        /*document.getElementById("ty0").textContent = response.data['m2m:cin'].ty;
        document.getElementById("ri0").textContent = response.data['m2m:cin'].ri;
        document.getElementById("pi0").textContent = response.data['m2m:cin'].pi;
        document.getElementById("ct0").textContent = response.data['m2m:cin'].ct;
        document.getElementById("lt0").textContent = response.data['m2m:cin'].lt;
        document.getElementById("st0").textContent = response.data['m2m:cin'].st;
        document.getElementById("cnf0").textContent = response.data['m2m:cin'].cnf;
        document.getElementById("cs0").textContent = response.data['m2m:cin'].cs;
        document.getElementById("con0").textContent = response.data['m2m:cin'].con;*/
        return response;
  })
  </script>
</body>

【问题讨论】：

标签： javascript html node.js

【解决方案1】：

app.get 等快速路由应位于顶层。所以实现看起来像这样


const express = require("express");
const app = express();
const axios = require("axios");

app.listen(3000, () => console.log("server is running"));

app.get("/", async (req, res) => {

  // The rest of your code here ....

});

尝试在CodeSandbox获取创意

代码示例

const express = require("express");
const app = express();
const axios = require("axios");

app.listen(3000, () => console.log("server is running"));

app.get("/", async(req, res) => {
  try {
    const username = "admin";
    const password = "admin";

    const token = Buffer.from(`${username}:${password}`, "utf8").toString(
      "base64"
    );
    const urlLAMP_0 = "http://127.0.0.1:8282/~/mn-cse/mn-name/LAMP_0/DATA/la";
    const urlLAMP_1 = "http://localhost:8282/~/mn-cse/mn-name/LAMP_1/DATA/la";

    const response = await axios.get(urlLAMP_0, {
      headers: {
        "Access-Control-Allow-Credentials": "true",
        "Access-Control-Allow-Origin": "*",
        "X-M2M-RI": "OM2M-webpage",
        Authorization: `Basic ${token}`,
        Accept: "application/json",
        mode: "cors",
        credentials: "include"
      }
    });
    return res.status(200).json(response.data);
  } catch (err) {
    console.log(err.message);
    return res.status(500).json("something went wrong");
  }
});

app.use(express.static("public"));

<title>LAMP DATA</title>

<style>
  * {
    font-family: sans-serif;
  }
  
  h1 {
    color: #009879;
    font-size: 300%;
    text-align: center;
  }
  
  .content-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    min-width: 400px;
    border-radius: 5px 5px 0 0;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
  }
  
  .content-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
    font-weight: bold;
  }
  
  .content-table th,
  .content-table td {
    padding: 12px 15px;
  }
  
  .content-table tbody tr {
    border-bottom: 1px solid #dddddd;
  }
  
  .content-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
  }
  
  .content-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
  }
</style>

<body>
  <h1>lamp Data</h1>
  <table class="content-table">
    <thead>
      <tr>
        <th>Name</th>
        <th>rn</th>
        <th>ty</th>
        <th>ri</th>
        <th>pi</th>
        <th>ct</th>
        <th>lt</th>
        <th>st</th>
        <th>cnf</th>
        <th>cs</th>
        <th>con</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>LAMP_0</td>
        <td><span id="rn0"></span></td>
        <td><span id="ty0"></span></td>
        <td><span id="ri0"></span></td>
        <td><span id="pi0"></span></td>
        <td><span id="ct0"></span></td>
        <td><span id="lt0"></span></td>
        <td><span id="st0"></span></td>
        <td><span id="cnf0"></span></td>
        <td><span id="cs0"></span></td>
        <td><span id="con0"></span></td>
      </tr>
      <tr>
        <td>LAMP_1</td>
        <td><span id="rn1"></span></td>
        <td><span id="ty1"></span></td>
        <td><span id="ri1"></span></td>
        <td><span id="pi1"></span></td>
        <td><span id="ct1"></span></td>
        <td><span id="lt1"></span></td>
        <td><span id="st1"></span></td>
        <td><span id="cnf1"></span></td>
        <td><span id="cs1"></span></td>
        <td><span id="con1"></span></td>
      </tr>
    </tbody>
  </table>
  <script>
    (function() {
      fetch("/")
        .then(function(response) {
          return response.json();
        })
        .then(function(data) {
          console.log(data);
          // const jsondata = JSON.parse(data);
          document.getElementById("rn0").textContent = data[0].body;
          // document.getElementById("rn0").textContent = jsondata["m2m:cin"].rn;
          /*document.getElementById("ty0").textContent = response.data['m2m:cin'].ty;
        document.getElementById("ri0").textContent = response.data['m2m:cin'].ri;
        document.getElementById("pi0").textContent = response.data['m2m:cin'].pi;
        document.getElementById("ct0").textContent = response.data['m2m:cin'].ct;
        document.getElementById("lt0").textContent = response.data['m2m:cin'].lt;
        document.getElementById("st0").textContent = response.data['m2m:cin'].st;
        document.getElementById("cnf0").textContent = response.data['m2m:cin'].cnf;
        document.getElementById("cs0").textContent = response.data['m2m:cin'].cs;
        document.getElementById("con0").textContent = response.data['m2m:cin'].con;*/
        });
    })();
  </script>
</body>

【讨论】：

当我运行你的代码时，我只在浏览器中显示数据，没有显示 HTML 文件，当我输入 app.use(express.static("public"));在服务器代码的开头，我在浏览器中显示了一个 HTML 文件，但我也收到错误“未捕获（承诺中）语法错误：意外的令牌
@Badr-EddineElmostaine，当然它不会完全在您的用例中工作。但它将为您提供实施的想法。尝试查看此链接以进行演示 codesandbox.io/s/restless-paper-tgw4p?file=/src/index.js 。它演示了如何将数据获取到第三方服务器并将其发送到客户端。