javascript - ReactJS 从 NodeJS 接收空数组
问题描述
我正在尝试将一些简单的数据从后端发送到 ReactJS API。但是,ReactJS 似乎没有收到它。ReactJS 只接收一个空字符串。这是两者的代码。Node 运行在 3000 端口,React 运行在 4000 端口。
index.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;
解决方案
问题出在您的节点服务器上。
您已经定义了一个中间件来设置特定的响应标头。
// 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
中间件函数。否则,请求将被挂起
推荐阅读
- arrays - 根据条件使用可选元素初始化数组
- node.js - FCM向nodeJS Google Cloud Function中的多个设备(不同用户)sendMulticast与sendToDevice推送通知?
- javascript - Analytics 被浏览器阻止时的出站链接
- mysql - JSON全文搜索mysql
- reactjs - 如何在激活联系表单字段的管理对话框中使某些值成为默认值并启用和其他没有默认值和禁用
- sql - 上次观察结转查询(SELECT from-between 不完整的时间序列)
- c# - 在 C# 中动态更改数据成员的名称
- angular - Angular 组件和服务是否应该始终避免使用 setInterval(或 rxjs 计时器)?
- c++ - 为什么 NaCL Crypto Library 源代码会引用代码中没有的头文件?
- python-3.x - 在我自己的排序键中使用元组时出现语法错误