ReactJS 从 NodeJS 接收空数组

Question

我正在尝试将一些简单的数据从后端发送到 ReactJS API。 但是，ReactJS 似乎没有收到它。 ReactJS 只是收到一个空字符串。 这是两者的代码。 Node 运行在 3000 端口，React 运行在 4000 端口。

索引.js

const express = require("express")
const app = express()
const cors = require("cors")
const a = "Hello world"


// app.use(cors())
app.use(cors({
        origin:"http://localhost:4000",
        methods:"GET,HEAD,PUT,PATCH,POST,DELETE",
        credentials:true
    }))

app.use((req,res,next)=>{
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization")
})

app.get("/", (req,res)=>{
    console.log("someone is here")
    res.json({
        data:a
    })

})


app.listen(3000, ()=>{
    console.log("Server is running")
})

主页.jsx

import React, { Component } from 'react'
import axios from 'axios'

class Homepage extends Component {

    state = {
        authenticated: false,
        data:[]
    };

     componentDidMount(){
        const url = "http://localhost:3000/"
        axios.get(url)
        .then(r=>{
            console.log(r.json())
           return r.json()
        })
        .then(data=>this.setState({data}))
        console.log(this.state.data)
    }

    render() { 
        return ( <h1>{this.state.data ? this.state.data : "loading"}</h1> );
    }
}

export default Homepage;

Answer 1

问题出在您的节点服务器上。

您已经定义了一个中间件来设置特定的响应标头。

// This block.
app.use((req,res,next)=>{
    res.header("Access-Control-Allow-Origin", "*")
    res.header("Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization")
})

问题是您没有调用回调函数上的next参数，因此中间件没有将控制权传递给next中间件（在您的情况下，路由处理程序）

修复：

app.use((req,res,next)=>{
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization");

    next();  // Add this line
})

关于 express 中间件的一个重要说明：

如果当前中间件函数没有结束请求-响应循环，则必须调用 next() 将控制权传递给next中间件函数。 否则，请求将被挂起