到express服务器的Javascript获取（POST）失败。服务器不接收来自JS的请求，但接收来自Postman的请求

MRE->：

---

当我使用Postman发送POST请求时，我得到了预期的结果。这是我用邮递员发送的请求

并且

testsent

被打印到我的节点服务器的控制台

但是，如果我从我的react表单发送请求，

test sent

不会打印到控制台，但是执行我的获取请求get的

catch

块，并且

err

会打印到我的react应用程序的控制台，后面是

{}

我想知道为什么我的POST请求不起作用，服务器也没有收到

---

下面是当有人单击我在react中创建的表单的提交按钮时我调用的函数

表单提交时调用的函数

nodeUrl = 'https://localhost:6060?'

const submitData = async () => {

    fetch(nodeUrl, {
      method: 'POST',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({'test': 'test'})
    }).then((res) => {
      alert('then')
    }).catch((err) => {
      alert('err')
      alert(JSON.stringify(err))
    })
  }
}

这是我使用

node server.js运行的服务器

server.js

server.post('/', function(req, res) {
    console.log('test sent')    
    mailer.messages().send(req.body)
    .then((mes) => {
        console.log(mes)
        res.json({ message: 'Thanks for your message. Our service team has been notified and will get back to you shortly.' })
    }).catch(err => {
        console.log(err)
        res.json(err);
    })
});

这里的主要问题是由于。可以用来克服这个问题。请记住，这仅适用于开发模式（请参见下面的代码）

但是，根据邮递员的快照和提供的GitHub存储库，来自前端的请求应该是
multipart/formdata
类型。因此，前端代码如下所示

const nodeUrl = "http://localhost:6060/";

const submitData = async () => {
  // create a FormData object
  const formData = new FormData();
  formData.append('form', 'example@email.com');
  formData.append('to', 'example@email.com');

  // this auto adds 'multipart/form-data' + HASH header in the request
  fetch(nodeUrl, {
    method: "POST",
    body: formData
  })
    .then(res => {
      console.log(res);
    }).catch(err => {
      console.log('Error -', err);
    });
};

要在ExpressJS中处理多部分/表单数据请求，您需要一个插件

策略2（纯JSON）

如果“多部分/表单数据”策略是无意的，而您只想发送简单的JSON，请使用以下代码-

在前端，根据需要触发API请求-

fetch(nodeUrl, {
  method: "POST",
  headers: {
    'Content-Type': 'application/json', // this needs to be defined
  },
  body: JSON.stringify({ from: 'some@email.com', to: 'other@email.com' })
})

在服务器中，只需忽略与Multer相关的代码，并且只保留API-

server.post('/', function(req, res) {
  console.log('Received body', req.body);
  ... // other codes
});

这里的主要问题是由于。可以用来克服这个问题。请记住，这仅适用于开发模式（请参见下面的代码）

但是，根据邮递员的快照和提供的GitHub存储库，来自前端的请求应该是
multipart/formdata
类型。因此，前端代码如下所示

const nodeUrl = "http://localhost:6060/";

const submitData = async () => {
  // create a FormData object
  const formData = new FormData();
  formData.append('form', 'example@email.com');
  formData.append('to', 'example@email.com');

  // this auto adds 'multipart/form-data' + HASH header in the request
  fetch(nodeUrl, {
    method: "POST",
    body: formData
  })
    .then(res => {
      console.log(res);
    }).catch(err => {
      console.log('Error -', err);
    });
};

要在ExpressJS中处理多部分/表单数据请求，您需要一个插件

策略2（纯JSON）

如果“多部分/表单数据”策略是无意的，而您只想发送简单的JSON，请使用以下代码-

在前端，根据需要触发API请求-

fetch(nodeUrl, {
  method: "POST",
  headers: {
    'Content-Type': 'application/json', // this needs to be defined
  },
  body: JSON.stringify({ from: 'some@email.com', to: 'other@email.com' })
})

在服务器中，只需忽略与Multer相关的代码，并且只保留API-

server.post('/', function(req, res) {
  console.log('Received body', req.body);
  ... // other codes
});

我最终使用了一个更好的获取请求，它是通过在Postman中选择
code->Javascript fetch
组合在一起的（保存按钮下）

我最终使用了一个更好的获取请求，它是通过在Postman中选择
code->Javascript fetch
组合在一起的（保存按钮下）

您定义了
nodeUrl
，但试图通过
数据
对象上的属性访问它。这可能是你的问题吗？@camwhite对不起，我在这里改了，这不是问题，我只是想让这篇文章更容易阅读。其他一切基本相同您在浏览器的控制台中看到了什么错误？是否说与“跨原产地”或CORS请求有关？您还可以尝试更新nodeUrl变量以替换最后一个？使用“/”，它会显示
err
，因为
警报（'err'）
，然后当我警报
err
对象时，我会看到
{}
，您将在开发工具的网络选项卡中看到完整的详细信息。选择筛选器部分下的XHR选项卡。您定义了
nodeUrl
，但试图通过
数据
对象上的属性访问它。这可能是你的问题吗？@camwhite对不起，我在这里改了，这不是问题，我只是想让这篇文章更容易阅读。其他一切基本相同您在浏览器的控制台中看到了什么错误？是否说与“跨原产地”或CORS请求有关？您还可以尝试更新nodeUrl变量以替换最后一个？使用“/”，它会显示
err
，因为
警报（'err'）
，然后当我警报
err
对象时，我会看到
{}
，您将在开发工具的网络选项卡中看到完整的详细信息。选择filter部分下的XHR选项卡。在生产模式下工作的方法是什么？你知道我可以从哪个资源了解更多关于这一点的信息吗，这些信息实际上被简化或拆分为笔记或图表？在生产中，静态文件（HTML、JS和CSS）将位于根域下。在那里，请求默认来自同一来源。不会有任何与CORS请求相关的问题。@Sam找到了一个。然而，我仍在等待您确认这确实是一个CORS问题。如果不是，那么我的答案将与您的问题无关。除了我在答案中发布的获取请求外，此解决方案还将导致一个工作解决方案什么是一种在生产模式下工作的方法？您知道我可以从中了解更多关于此的信息的资源吗，这在笔记或图表中被简化或拆分了？在生产中，静态文件（HTML、JS和CSS）将位于根域下。在那里，请求默认来自同一来源。不会有任何与CORS请求相关的问题。@Sam找到了一个。然而，我仍在等待您确认这确实是一个CORS问题。如果不是，那么我的答案将与您的问题无关。除了我在答案中发布的获取请求之外，此解决方案还将导致一个有效的解决方案