req.body 為空，獲取請求

Question

我正在嘗試向我的服務器發出提取請求。 但我一直收到一個空的 req.body。

客戶端腳本：

  const form = document.getElementById('form1')

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const link = formData.get('link');
    var payload = {
        link
    };
    console.log(payload);

    const options = {
        method: "POST",
        body: JSON.stringify(payload),
        headers: {
            'content-type': 'application/json'
        }
    }
    console.log(options);

    fetch('/api/gtmetriks', options)
        .then(response => response.json()).then(result => console.log(result)).catch(err => console.log(err));
})

服務器代碼：

const bodyParser = require('body-parser');
const cors = require('cors')
const app = express()
//cors
app.use(cors())

app.use(bodyParser.urlencoded({
    extended: true
}));
// parse application/json
app.use(bodyParser.json())
app.post('/api/gtmetriks', (req, res) => {       
    console.log(req.body);     
})

所以當我發布請求時，我進入了控制台“{}”。 但客戶端瀏覽器中沒有錯誤。

Answer 1

我認為問題在於您使用的是 CORS，但沒有指定要發布到哪個 URL。 例如，您的客戶端是http://localhost:3000而您的服務器是http://localhost:3001 。 您將 fetch 發送到http://localhost:3000/api/gtmetriks而不是http://localhost:3001/api/gtmetriks 。

如果您將提取更改為：

fetch('[YOUR SERVER URL]/api/gtmetriks', options)
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(err => console.log(err));
})

它應該工作。

編輯#1：

這段代碼使用 React 前端 (3000) 和 Express 后端 (3001) 對我有用：

客戶端應用程序.js

import React, { Component } from 'react';

export default class App extends Component {
  handleSubmit = () => {
    const payload = {
      link: 'http://tesla.com',
    };

    const options = {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'content-type': 'application/json',
      },
    };

    fetch('http://localhost:3001/api/gtmetriks', options)
      .then(response => response.json())
      .then(result => console.log(result))
      .catch(err => console.log(err));
  };

  render() {
    return (
      <button
        onClick={() => {
          this.handleSubmit();
        }}>
        Click Me
      </button>
    );
  }
}

服務器 server.js

const express = require('express');
const logger = require('morgan');
const cors = require('cors');

const app = express();

//use cors to allow cross-origin resource sharing
app.use(
  cors()
);

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.post('/api/gtmetriks', (req, res) => {
  console.log(req.body);
  res.sendStatus(200);
});

//start your server on port 3001
app.listen(3001, () => {
  console.log('Server Listening on port 3001');
});