Nodejs反应无法在前端获取数据答案

【问题标题】：Nodejs react cannot get data on frontendNodejs反应无法在前端获取数据
【发布时间】：2021-08-12 23:18:47
【问题描述】：

我正在尝试从后端获取所有用户数据以显示在网页上。但是，getAllUsers() 似乎没有发回响应，因为 console.logs 没有打印出来。

这是我的 ViewUsers.js

import React, { Component } from "react";
import AdminServices from "../Services/AdminServices";
import "././ViewUsers.css"

const ViewUsersComponent = (users) => {

    return (
        <div className="viewusers">
            <h1>All users</h1>
            <div className="viewusers-list">
                {users.map((user) => {
                    return (
                    <React.Fragment>
                        <p> <b>Name</b> : {user.username} </p>
                        <p> <b>Email</b> : {user.email} </p>
                        <p> <b>Website role</b> : {user.websiteRole} </p>
                        <hr />
                    </React.Fragment>
                    )
                })}
            </div>
        </div>
    )
}

export default class ViewUsers extends Component {

    constructor(props) {
        super(props);
        this.retrieveUsers = this.retrieveUsers.bind(this);

        this.state = {
            users: []
        }
    }

    componentDidMount() {
        this.retrieveUsers();
    }

    retrieveUsers() {
        AdminServices.getAllUsers()
            .then(response => {
                if (response && response.data) {
                    this.setState({
                        users: response.data
                    });
                }
                console.log(response.data);
                console.log('DATA RECEIVED')
            })
            .catch(e => {
                console.log('ERROR')
                console.log(e); 
            });
    }

    render () {
        const { users } = this.state;
        console.log(users)

        if (Array.isArray(users) && users.length) {
            return ViewUsersComponent(users)
        } else {
            return (
                window.location = '/notfound'
            )
        }
    }
}

这是 AdminServices.js

import http from "../http-common"

class AdminServices {
    getAllUsers() {
        return http.get("/users");
    }

    getAllProjects() {
        return http.get("/projects");
    }
}

export default new AdminServices();

还有 http-common.js

import axios from "axios";

export default axios.create({
    baseURL: "http://localhost:8080",
    headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
    },
    mode: "cors",
    credentials: "include",
    withCredentials: true
});

还有 userRoute.js

const express = require('express');

const User = require('../models/user').userModel;

const userRouter = express.Router();

// get all users
userRouter.get('/', async (req, res) => { 
  try {
    console.log("loading users")
    users = await User.find();
    if (users == null) {
      res.status(404).json({ message: "users not found" });
    }
    res.send(users);
  } catch (err) {
    res.status(500).json({ message: err.message });
  }
});

当我通过 rest api 向用户路由发送 get 请求时，它可以工作，所以我不确定为什么它没有在前端通过

【问题讨论】：

您得到/users，但只有/ 的路由处理程序。如果那是在路由器内部，你为什么要检查response.data？你记录了response 是什么？
哦，抱歉，我忘记将下面的代码添加到我在 app.js 中使用的帖子中的代码中，所以 UserRoute 中的 '/' 将是 '/users' const usersRouter = require( './routes/UserRoute'); app.use('/users', usersRouter);
我尝试记录响应，但控制台中没有显示任何内容

标签： javascript node.js reactjs axios

【解决方案1】：

请在后端项目中添加 CORS。您可以配置 UI 域或使用“*”来允许所有域。

【讨论】：

是的，我添加了 cors app.use(cors({ credentials: true, origin: "localhost:3000" }));