英文:
Vue.js POST 400 (Bad Request)
问题
My frontend service is like below, I want to send a JSON body to my node.js server backend. The console.log(sample)
is shown in console with correct format and with correct data that I want to send, and so is console.log(requestOptions)
. However, my node backend side keeps on returning POST 400 (Bad Request). Can anyone help me with the code?
Vue
service.js
import config from 'config';
import { authHeader } from '../_helpers';
export const sampleService = {
addNewSample,
}
function addNewSample(sample){
console.log(sample);
const requestOptions = {
method: 'POST',
headers: authHeader(),
body: JSON.stringify(sample)
};
console.log(requestOptions);
return fetch(`${config.apiUrl}/samples/newAdd`, requestOptions);
}
Node.js
controller.js
const express = require('express');
const router = express.Router();
const sampleService = require('./sample.service');
//routes
router.post('/newAdd', addSample);
module.exports = router
function addSample(req, res, next){
console.log(req);
sampleService.create(req.body)
.then(() => res.json({}))
.catch(err => next(err));
}
service.js
const config = require('config.json');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const db = require('_helpers/db');
const Sample = db.Sample;
module.exports = {
create
};
async function create(sampleParam) {
console.log(sampleParam);
const sample = new Sample(sampleParam);
// save sample
await sample.save();
}
I've tried this but I don't know how to revise my code to make my backend return 200 success.
英文:
My frontend service is like below, I want to send a JSON body to my node.js server backend. The console.log(sample) is shown in console with correct format and with correct data that I want to send, and so is console.log(requestOptions). However, my node backend side keep on return POST 400(Bad Request). Can anyone help me with the code?
Vue
service.js
import config from 'config';
import { authHeader } from '../_helpers';
export const sampleService = {
addNewSample,
}
function addNewSample(sample){
console.log(sample);
const requestOptions = {
method: 'POST',
headers: authHeader(),
body: JSON.stringify(sample)
};
console.log(requestOptions);
return fetch(`${config.apiUrl}/samples/newAdd`, requestOptions);
}
Node.js
controller.js
const express =require('express');
const router = express.Router();
const sampleService = require('./sample.service');
//routes
router.post('/newAdd', addSample);
//router.get('/:id', getById);
module.exports = router
function addSample(req, res, next){
console.log(req);
sampleService.create(req.body)
.then(() => res.json({}))
.catch(err => next(err));
}
service.js
const config = require('config.json');
const jwt = require('jsonwebtoken');
const bcrypt = require('bcryptjs');
const db = require('_helpers/db');
const Sample = db.Sample;
module.exports = {
create
};
async function create(sampleParam) {
console.log(sampleParam);
const sample = new Sample(sampleParam);
// save sample
await sample.save();
}
I've tried this but I don't know how to revised my code to make my backend to return 200 success.
答案1
得分: 0
假设 authHeader()
只返回一个带有 Authorization
键的对象,你缺少了必要的 Content-Type
头部以将请求主体标识为 JSON。
const requestOptions = {
method: "POST",
headers: {
...authHeader(),
"content-type": "application/json", // 👈 添加的头部
},
body: JSON.stringify(sample),
};
在服务器端,你还需要确保你有正确的中间件来处理 JSON 请求主体。
app.use(express.json());
英文:
Assuming that authHeader()
only returns an object with the Authorization
key, you are missing the required Content-Type
header to identify the request body as JSON
const requestOptions = {
method: "POST",
headers: {
...authHeader(),
"content-type": "application/json", // 👈 added header
},
body: JSON.stringify(sample),
};
On the server-side, you also need to ensure you have the correct middleware for handling JSON request bodies
app.use(express.json());
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论