[英]post endpoint 404 in firefox and pending in chrome
Following this quick guide ( React and PostgreSQL ), the following app should print the JSON fetch to the bash terminal (at ~37min of video). 按照此快速指南( React和PostgreSQL ),以下应用应将JSON提取信息打印到bash终端(在视频的37分钟左右)。
However this does not happen. 但是,这不会发生。 There is no feedback on the npm or nodemon servers. 在npm或nodemon服务器上没有反馈。
When adding a value via the front-end, firefox instantly sends back a 404 status (observed in console:network). 通过前端添加值时,firefox立即发送回404状态(在console:network中观察到)。 In chrome, the thread hangs as pending until the nodemon server is shut down (and then fails with a connection reset error)(again in console:network). 在chrome中,线程挂起为挂起状态,直到nodemon服务器关闭(然后由于连接重置错误而失败)(同样在console:network中)。
npm is running app and nodemon is running the server. npm正在运行应用程序,而nodemon正在运行服务器。
app.js app.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
constructor(props) {
super();
this.state = {
title: 'Simple postgres app',
treatments: []
}
}
componentDidMount(){
console.log('COMPONENT HAS MOUNTED')
}
addStuff(event){
event.preventDefault()
// console.log('in method');
let data = {
test_field: this.refs.test_field.value,
};
var request = new Request('http://localhost:3000/api/new-thing', {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json' }),
body: JSON.stringify(data),
message: console.log('JSON output: ', JSON.stringify(data))
});
fetch(request)
.then((response) => {
response.json()
.then((data) => {
console.log(data)
})
})
}
render() {
let title = this.state.title;
return (
<div className="App">
<h1> { title } </h1>
<form ref = "testForm">
<input type="text" ref="test_field" placeholder="test_field"/>
<button onClick={this.addStuff.bind(this)}>Add This</button>
</form>
</div>
);
}
}
export default App;
server.js server.js
let express = require('express');
let bodyParser = require('body-parser');
let morgan = require('morgan');
let pg = require('pg');
const PORT = 3000;
// let pool = new pg.Pool({
// port: 5432,
// user: 'postgres',
// password: 'postgres',
// database: 'po1dev_v0.0.1',
// max: 10, //max connections
// host: 'localhost'
// })
let app = express();
app.use(bodyParser.json);
app.use(bodyParser.urlencoded({ extended:true }));
app.use(morgan('dev'));
app.use((request, response, next) => {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// app.post('/api/new-thing', (request,response) => {
// console.log(request.body)
// })
app.post('/api/new-thing', function(request,response){
console.log(request.body);
})
app.listen(PORT, () => console.log('Listening on port ' + PORT));
Any ideas on what may be causing the 404/hang problems in firefox/chrome and how to go about fixing it? 关于什么可能导致Firefox / chrome出现404 / hang问题的任何想法,以及如何解决它?
Cheers 干杯
That's because the route you're creating doen't return any response so it waits indefinitely for a response then gets timed out. 这是因为您正在创建的路由不会返回任何响应,因此它会无限期地等待响应,然后超时。
The route should return some response, 该路线应返回一些响应,
app.post('/api/new-thing', function(request,response){
console.log(request.body);
return response.json({"data": "Hello World"})
})
Which will return the {"data": "Hello World"}
from the /api/new-thing
route. 它将从/api/new-thing
路由返回{"data": "Hello World"}
。
Also, bodyParser.json
is a function not property. 另外, bodyParser.json
是函数而不是属性。 Change it to 更改为
app.use(bodyParser.json())
If you are using create-react-app
try another port for the backend server. 如果您使用create-react-app
,请为后端服务器尝试另一个端口。 Because by default it uses 3000 for the react app. 因为默认情况下,它为react应用程序使用3000。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.