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中間件函數。 否則，請求將被掛起