Javascript req.body在fetch请求中为空

我正在尝试向我的服务器发出获取请求。 但我总是得到一个空的请求体

客户端脚本：

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

因此，当我发布请求时，我会进入控制台“{}”。

---

但客户端浏览器中没有错误

我认为问题在于您正在使用CORS，但没有指定要发布到哪个URL。例如，您的客户是

http://localhost:3000

但您的服务器是

http://localhost:3001

。您正在将提取发送到

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）为我工作：

客户端app.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>
    );
  }
}

---

是`console.log（有效负载）；`打印正确的数据？这是输出：

{method:“POST”，body:{“link”：“tesla.com”}，headers:{…}}body:{“link”：“tesla.com”}headers:content type:“application/json”\uuuuuuuuuu proto\uuuu:Object方法：“POST”\uuuuuu proto\uuo:Object

能否添加

res.sendStatus（200）

到

控制台.log（）下的服务器代码，然后发送请求头？服务器日志是否显示任何错误？app.post（'/api/gtmetriks'，（req，res）=>{res.send（req.body）；}）如果您这样做会怎么样？它在我的计算机上工作正常。不工作：
fetch（'localhost:5000/api/gtmetriks'，options）。然后（response=>response.json（））。然后（result=>console.log（result））.catch（err=>console.log（err））检查编辑。我添加了工作代码并验证了发送的请求。我不能在同一端口上同时使用它们吗？不，不能。React和Node都必须在单独的端口上运行，因为它们都是单独的服务器。React是您的前端服务器，Node是您的后端服务器。@MendiSterenfeld在这里的第一条评论中，您省略了非常重要的
http://
。。
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');
});