無法從ExpressJS中檢索回應

我是使用 Nodejs、Expressjs 和 Web 開發的新手，并且在從來自我的應用程式的 react-front-end 的 get 請求中從后端 expressjs 服務器檢索資料時遇到問題。

截至目前，我可以讓 express.js 回應我的 get 請求，但由于某種原因 expressjs 沒有發回我請求的資料，或者我沒有正確讀取它。

我試過同時使用 fetch 和 axios，但我仍然遇到同樣的問題。我使用 res.render("hello"),res.get("hello") 和 res.send("hello") 沒有成功。

注意：我的前端在 3000 埠上運行，我的后端在 8100 埠上運行。我也在使用代理。

這是我的前端 React 代碼：

import { IonButton, IonContent, IonHeader, IonInput, IonItem, IonLabel, IonPage, IonTitle, IonToolbar } from '@ionic/react';
import { useState } from 'react';
import ExploreContainer from '../components/ExploreContainer';
import './Home.css';
import axios from 'axios';

const Home: React.FC = () => {
 
  const[robot_name_input,setInput1]=useState<string>('')
  const[ipaddress_input,setInput2]=useState<string>('')



  return (
    <IonPage>
      
      <IonHeader>
        
        <IonToolbar>
          <IonTitle>Robot Backup</IonTitle>
        </IonToolbar>
      
      </IonHeader>
      
      <IonContent fullscreen>
       
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Robot Backup</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonLabel>Enter Robot Name</IonLabel>
        <IonInput value={robot_name_input} onIonChange={(e:any)=>setInput1(e.target.value)}>   </IonInput>

        <IonLabel>Enter Robot Ip Address</IonLabel>
        <IonInput value={ipaddress_input} onIonChange={(e:any)=>setInput2(e.target.value)}>   </IonInput>

        <IonButton expand="block" onClick={(e) =>{retrieveRobots();}}>Add Robot</IonButton>
        <IonButton expand="block" onClick={(e) =>{retrieveRobots();}}>Refresh</IonButton>
        <ExploreContainer />

        
        <IonItem>
        <IonLabel>Item 1</IonLabel>
        </IonItem>
        
        <IonItem>
        <IonLabel>Item 2</IonLabel>
        </IonItem>

        <IonItem>
        <IonLabel>Item 3</IonLabel>
        </IonItem>

      
      </IonContent>
    
    </IonPage>
  );
};

export default Home;



  function retrieveRobots()
  {

    //Option 1: Axios 
    axios.get('http://127.0.0.1:3000/getrobots')
    .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  }); 
 
  //Option 2: fetch 
  /* fetch('http://127.0.0.1:8100/getrobots',{
    method: 'GET',
    headers:{'Content-Type': 'application/json'},
  })
  .then(async response => response.json())
  .then(async response => {
      console.log('waiting for response');
      console.log(await response.text());
      console.log('response recieved');
  }); */
} 

這是我遇到上述代碼問題的地方：

  {

    //Option 1: Axios 
    axios.get('http://127.0.0.1:3000/getrobots')
    .then(function (response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  }); 
 
  //Option 2: fetch 
   fetch('http://127.0.0.1:8100/getrobots',{
    method: 'GET',
    headers:{'Content-Type': 'application/json'},
  })
  .then(async response => response.json())
  .then(async response => {
      console.log('waiting for response');
      console.log(await response.text());
      console.log('response recieved');
  }); 
} 

我的后端快遞代碼：

const express = require('express')

const app = express()
const port = 8100
var fs = require('fs');
app.use(express.json())

app.get('/getrobots', (req, res) => {

  var DB=require('better-sqlite3')
  var db_helper=require('better-sqlite3-helper')

  db_helper({
    path: './../Database/fanuc_robots.db', // this is the default
    readonly: false, // read only
    fileMustExist: false, // throw error if database not exists
    WAL: true, // automatically enable 'PRAGMA journal_mode = WAL'
    migrate:false,
  })

let row = db_helper().queryFirstRow('SELECT * FROM Robots WHERE robot_index=?', 0);
console.log(row.robot_index, row.robot_name, row.ip_address);
res.get('hello');
console.log('response has been sent');


});
  

app.listen(port, () => {
 console.log(`Example app listening on port ${port}`)
})

uj5u.com熱心網友回復：

@zac-rougeau 在我看來，對于后端代碼，您必須使用res.send('hello')而不是res.get(). 您可以使用一些工具來測驗您的后端 API，Postman例如Insomnia.

在這里，我撰寫了非常簡單的 get API，它回傳hello（如您的情況）字串，并且我已經使用Postman.

代碼

郵差

同樣，您可以使用郵遞員測驗您的 API，如果您收到hello郵遞員作為回應，那么您必須除錯您的前端代碼。

此外，在您的前端代碼中，您將指向方法3000中的埠axios.get()。實際上，它是8100（在你的情況下）。您能否將其更改為正確的后端埠并再次檢查？

uj5u.com熱心網友回復：

我通過執行以下操作弄清楚了：

第 1 步：我進入 chromes 開發者工具，注意到當資料即將發送回應用程式前端時，控制臺顯示了一個 cors 錯誤。

第 2 步：我將 cors 庫安裝到我的專案中：npm install cors

第 3 步：將以下內容添加到我的 expressjs 檔案中以洗掉 CORS 錯誤：

常量 cors=require('cors'); app.use(cors());

第 4 步：根據此視頻，使用 res.json("hello") 而不是 res.send("hello") 發送資料：

https://www.youtube.com/watch?v=1wXYg8Eslnc

第 5 步：將我的 fetch 回應代碼修復為：

  fetch('http://127.0.0.1:8100/getrobots',{
    method: 'GET',
    headers:{'Content-Type': 'application/json'},
  })
  .then(async response => response.json())
  .then(async response => {
      console.log('waiting for response 2');
      console.log(await response);
      render(response.toString())
      console.log('response recieved 2');
      var element=<h1>response</h1>
      ReactDOM.render(element, document.getElementById('root'));
  }); 

注意：我將 ReactDOM 匯入應用程式的前端 react 部分，以便在前端的瀏覽器上顯示 hello

感謝大家提供不同的建議來幫助解決這個問題。

標籤：节点.js 反应 sqlite axios 拿来

上一篇：Django異步模型更新未生效

下一篇：Sqlite使用Insert、Executemany和元組串列避免重復