无法从 ExpressJS 检索响应

Question

我是 Nodejs、Expressjs 和 Web 开发的新手，我在从我的后端 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}`)
})

Answer 1

@zac-rougeau 在我看来，对于 back-end 代码，您必须使用 res.send('hello') 而不是 res.get()。您可以使用 Postman、Insomnia.

等工具测试您的 back-end API

在这里，我写了非常简单的 get API which returns hello （像你的情况一样）字符串，我测试了这个 get API 和 Postman.

代码

邮递员

同样，您可以使用 postman 测试您的 API，如果您在 postman 中得到 hello 作为响应，那么您必须调试您的 front-end 代码。

此外，在您的 front-end 代码中，您在 axios.get() 方法中指向端口 3000。实际上，它是 8100 （在你的情况下）。您能否将其更改为正确的 back-end 端口并再次检查？

Answer 2

我通过执行以下操作弄明白了：

第1步：进入chrome开发者工具，发现在数据即将回传给应用前端时控制台显示cors错误

第 2 步：我将 cors 库安装到我的项目中：npm install cors

第 3 步：将以下内容添加到我的 expressjs 文件中以消除 CORS 错误：

const cors=require('cors'); app.use(cors());

第 4 步：根据此视频使用 res.json("hello") 而不是 res.send("hello") 发送数据：

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

第 5 步：将我的提取响应代码修复为：

  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 导入到应用程序的 front-end 反应部分，以便在前端的浏览器上显示 hello

感谢大家提出不同的建议来帮助解决这个问题。

无法从 ExpressJS 检索响应

Can't Retrieve a Response from ExpressJS

sqlite

fetch

node.js

reactjs

axios