无法使用 fetch() 向任何 url 发出发布请求

Question

我正在尝试将数据从我的前端 React 应用程序发送到我的节点后端，每当我使用 fetch() 函数发出发布请求时，我都会在 Firefox 开发工具控制台中收到此错误：

TypeError: NetworkError when attempt to fetch resource.

我正在尝试发布到 http://localhost:8080/uploadComic，但是如果我尝试向 https://reqbin.com/post

发出请求，我会得到同样的错误

当我使用 firefox 开发工具向 http://localhost:8080/uploadComic 发出请求时，我得到了服务器的响应，所以我认为我的前端代码可能是问题所在

这里是前端代码：

handleSubmit = async () => {
    fetch('http://localhost:8080/uploadComic', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({message: 'test'})
    }).then(data => {
      console.log(data)
    }).catch(e => {
      console.log(e)
    })
  }

这是我的后端代码：

router.post('/uploadComic', function (req, res) {

    // this never prints
    console.log('/uploadComic: request recieved')
})

我使用 fetch() 向我的后端发送了多个 GET 请求，它们都工作正常，并且我尝试使代码尽可能简单，以至少尝试从后端获得响应。

我确定这可能是一个非常简单的修复，但我已经坚持了一段时间并且似乎无法弄清楚

编辑

我发现了问题，我的 html 中的

<form>

元素导致了错误。删除

<form>

标签后数据开始发布

Answer 1

尝试使用 axios 进行发布请求。

const post = { message: 'test'}
    try {
      const res = await axios.post('http://localhost:3001/users', post)
      console.log(res.data)
    } catch (e) {
      alert(e)
    }

我还检查了您的

fetch()

功能代码，您的代码运行良好。但是为了常见的做法和更好的错误检测，我们编写这样的代码：

 try {
              const response = await fetch(''http://localhost:8080/uploadComic', {
                headers: {'Content-Type' : 'application/json'},
                method : 'POST',
                body : JSON.stringify({
                 message : 'test' 
                })
              })
             const data =await  response.json() 
             console.log(data)
            }catch(e){
                console.log(e)