javascript ReactJS 和 Node -- 错误 400 错误请求
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49234707/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-29 08:29:26 来源:igfitidea点击:
ReactJS and Node -- Error 400 bad request
提问by dorcsi
I am trying to build a react application which saves data into database.
我正在尝试构建一个将数据保存到数据库中的 React 应用程序。
I have the following classes:
我有以下课程：
server.js
服务器.js
let express = require('express');
let bodyParser = require('body-parser');
let morgan = require('morgan');
let pg = require('pg');
let cors = require('cors');
const PORT = 3000;
let pool = new pg.Pool({
user: 'admin',
database: 'dev',
password: 'password',
host: 'localhost',
port: 5432,
max: 10
});
let app = express();
app.use(cors());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(morgan ('dev'));
app.use(function(request, response, next) {
response.header("Access-Control-Allow-Origin", "*");
response.header("Access-Control-Allow-Headers", "Origin, X-Requested-
With, Content-Type, Accept, Authorization")
next();
});
app.get('/api/creditcards', function(request, response) {
pool.connect(function(err, db, done) {
if (err) {
return response.status(400).send(err);
} else {
db.query('SELECT * FROM creditcards', function(err, table) {
done();
if (err) {
response.status(400).send(err)
}else {
response.status(200).send(table.rows)
}
})
}
})
});
app.post('/api/new-card', function(request, response) {
var cardholder = request.body.cardholder;
var cardnumber = request.body.cardnumber;
var card_identifier = request.body.card_identifier;
var expiration = request.body.expiration;
var cvc = request.body.cvc;
let values = [cardholder, cardnumber, card_identifier, expiration, cvc];
pool.connect((err, db, done) => {
if(err) {
return response.status(400).send(err);
} else {
db.query('INSERT INTO creditcards (cardholder, cardnumber, card_identifier, expiration, cvc) VALUES (, , , , )', [cardholder, cardnumber, card_identifier, expiration, cvc] ,(err, table) => {
done();
if (err) {
return response.status(400).send(err)
} else {
console.log('DATA INSERTED');
response.status(201).send({message : 'Data inserted...'})
}
})
}
})
});
app.listen(PORT, () => console.log('Listening on port ' + PORT));
and SaveNewCard.js
和SaveNewCard.js
import React from 'react';
import Modal from './Modal';
import Payment from 'payment';
import { Row, Col, FormGroup, ControlLabel, Button, Alert, Grid } from 'react-bootstrap';
class SaveNewCard extends React.Component {
constructor() {
super();
this.state = {
creditcards: [],
isLoading: false,
error: null,
}
}
componentDidMount() {
const { cardnumber, expiration, cvc } = this.refs;
Payment.formatCardNumber(cardnumber);
Payment.formatCardExpiry(expiration);
Payment.formatCardCVC(cvc);
console.log('Component has mounted')
var that = this;
fetch('http://localhost:3000/api/creditcards')
.then(response => {
console.log(response)
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => that.setState({ creditcards: data.creditcards, isLoading: false }))
.catch(error => this.setState({ error, isLoading: false }));
}
addCreditCard(event) {
var that = this;
event.preventDefault();
let card_data = {
cardholder : this.refs.cardholder.value,
cardnumber : this.refs.cardnumber.value,
card_identifier : (this.refs.cardnumber.value).substr(15),
expiration : this.refs.expiration.value,
cvc : this.refs.cvc.value
};
console.log('Ez itt: ' + JSON.stringify(card_data))
var request = new Request('http://localhost:3000/api/new-card', {
method: 'POST',
headers: new Headers({ 'Content-Type': 'application/json', }),
body: JSON.stringify(card_data)
});
let creditcards = that.state.creditcards;
creditcards.push(card_data);
that.setState({
creditcards : creditcards
})
console.log(creditcards)
fetch(request)
.then(response => {
console.log(request)
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => this.setState({ creditcards: data.creditcards }))
.catch(error => this.setState({ error }));
}
cardList() {
return (<ul className="credit-card-list clearfix">
<Alert fluid style={{ paddingLeft: 40}} bsStyle="warning">
<strong>Please consider that only the following credit cards can be accepted:</strong>
<li><i data-brand="visa" className="fa fa-cc-visa">VISA</i></li>
<li><i data-brand="amex" className="fa fa-cc-amex">AMEX</i></li>
<li><i data-brand="mastercard" className="fa fa-cc-mastercard">Master Card</i></li>
</Alert>
</ul>);
}
saveNewCardForm() {
let creditcards = this.state.creditcards;
return (
<div>
<form className="SaveNewCard" onSubmit={ this.handleSubmit } style={{ paddingLeft: 40, paddingRight: 600}}>
<Grid fluid style={{ paddingLeft: 60, paddingRight: 60}}>
<Row>
<Col xs={12}>
<FormGroup>
<ControlLabel>Cardholder Name</ControlLabel>
<input
onKeyUp= {this.setCardType}
className="form-control text-center"
type="text"
ref="cardholder"
placeholder="Your Name"
/>
</FormGroup>
</Col>
</Row>
<Row>
<Col xs={ 12 }>
<FormGroup>
<ControlLabel>Card Number</ControlLabel>
<input
onKeyUp={ this.setCardType }
className="form-control text-center"
type="text"
ref="cardnumber"
placeholder="Card Number"
/>
</FormGroup>
</Col>
</Row>
</Grid>
<Grid fluid style={{ paddingLeft: 60, paddingRight: 60}}>
<Row >
<Col xs={ 6 } sm={ 5 }>
<FormGroup>
<ControlLabel>Expiration</ControlLabel>
<input
className="form-control text-center"
type="text"
ref="expiration"
placeholder="MM/YYYY"
/>
</FormGroup>
</Col>
<Col xs={ 6 } sm={ 4 } smOffset={ 3 }>
<FormGroup>
<ControlLabel>CVC</ControlLabel>
<input
className="form-control text-center"
type="text"
ref="cvc"
placeholder="CVC"
/>
</FormGroup>
</Col>
</Row>
</Grid>
<Button bsStyle="primary" onClick={this.addCreditCard.bind(this)}>Submit</Button>
<Button onClick={this.removeCreditCard.bind(this)}>Delete</Button>
</form>
<ul>
{creditcards.map((creditcards => <li>{creditcards.cardholder}</li>))}
</ul>
</div>);
}
render() {
return (<div className="CreditCard">
{ this.cardList() }
{ this.saveNewCardForm() }
</div>);
}
}
SaveNewCard.propTypes = {};
export default SaveNewCard;
But I got the following Bad Request 400 error:
但我收到以下错误请求 400 错误：
And:
和：
As I can understand, my request does not contain the inserted data... I assume the problem is here somewhere....:
据我所知，我的请求不包含插入的数据......我认为问题出在某处......：
I let to write the "card_data" content to the console, it is there:
我让将“card_data”内容写入控制台，它在那里：
Any idea, why am I getting nulls as input data?
任何想法，为什么我将空值作为输入数据？
Sorry for this long post....
对不起，这篇长文......
UPDATE:
更新：
The code fails at this line:
代码在这一行失败：
I replaced the "request.body.XY" variables with direct input and in that case the insert to database was working.... It may something with my request...
我用直接输入替换了“request.body.XY”变量，在这种情况下，插入到数据库的工作正常......它可能与我的请求有关......
回答by Miguel Giménez
the problem is that you are not using fetch correctly . to do a post request you should do it like so :
问题是您没有正确使用 fetch 。要进行发布请求，您应该这样做：
const options = {
method: 'post',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json'
},
body: JSON.stringify(card_data)
}
fetch('http://localhost:3000/api/new-card', options)
.then(response => {
console.log(request)
if (response.ok) {
return response.json();
} else {
throw new Error('Something went wrong ...');
}
})
.then(data => this.setState({ creditcards: data.creditcards }))
.catch(error => this.setState({ error }));
