Vue.js 提交 400 (错误请求)

huangapple go评论75阅读模式
英文:

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());

huangapple
  • 本文由 发表于 2023年7月3日 08:55:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/76601317.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定