尝试使用 Axios 将数据从 Express 后端传递到 React 前端，但不起作用答案

【问题标题】：Trying to pass data from Express backend to React frontend with Axios, doesn't work尝试使用 Axios 将数据从 Express 后端传递到 React 前端，但不起作用
【发布时间】：2021-10-28 14:21:09
【问题描述】：

我正在尝试使用 Axios 将数据从 Express 后端传递到 React 前端，但它不起作用。我试图传递的数据来自一个文本文件。

后端：

const express = require('express');
const app = express();

var fs = require('fs')
var data1 = fs.readFileSync('./inputs/category1.txt', 'utf8')
var textByLine1 = data1.split('\r\n')
var data2 = fs.readFileSync('./inputs/category2.txt', 'utf8')
var textByLine2 = data2.split('\n')


console.log(textByLine1)

app.get("/", function(req, res){
    res.send(textByLine1)
})
app.listen(3001, function(){
    console.log("express server is running on port 3001");
})

Axios：

import axios from 'axios';


export type ApiClient = {
    getProperties: (c:number) => Promise<string[]>;
}

/** get tickets with search and page queries */
export const createApiClient = (): ApiClient => {
    return {
        getProperties: async (c:number) => {
            const res = await axios.get('/', { params: { category: c} });
            return res.data;
        }
    }
}

export default createApiClient

反应前端：

import React from 'react';
import './App.css';
import {createApiClient} from './api'; //connection to server


export type AppState = {
  flow: number,
  category_index: number,
  categories: string[],
}

const api = createApiClient()

export class App extends React.PureComponent<{}, AppState> {

  state: AppState = {
        flow: 1,
    category_index: 2,
    categories:[]
    }

  async componentDidMount() {
    this.setState({
            categories: await api.getProperties(this.state.flow)
        });
    console.log(this.state.categories)

  }
  
  render() {
    return( 
    <main>    
      <div>  
      <button>click me</button>
      </div>
    </main>
    )
  }

}

export default App;

我正在尝试将字符串列表从后端传递到前端，而不是通过 console.log 来查看它是否已实际传递。相反，我在控制台中看到以下内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="/manifest.json" />
    <!--
      Notice the use of  in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  <script src="/static/js/bundle.js"></script><script src="/static/js/vendors~main.chunk.js"></script><script src="/static/js/main.chunk.js"></script></body>
</html>

我认为这意味着我在 axios.get() 中变得“空”。我做错了什么？

【问题讨论】：

您实际上并未向 API 发出请求，因此开发服务器返回 index.html 以允许 SPA 进行客户端路由。
非常感谢 :) 为什么不提出请求？如何改变这种情况？
我不知道您为什么不向 API 发出请求；不清楚你为什么认为.get('/', ...)会这样做，因为它显然是对刚刚给你 React 应用程序的同一端点的请求。

标签： javascript reactjs express axios

【解决方案1】：

要调用您的 API，您需要调用您的 API 所服务的 URL，我认为是 http://localhost:3001/。

试试这个：

const res = await axios.get('http://localhost:3001/', { params: { category: c} });

【讨论】：