使用Postman可以正常发送GET请求，但是为什么使用ReactJS fetch却无法正常工作？

Question

当我在Postman上进行GET请求时，它成功地进行了GET请求:

但是当我在ReactJS中进行GET fetch时：

var data = {
  'Content-Type': 'application/json',
  'vin': 'TESTVIN1234567890'
}

var myInit = {
  method: 'GET',
  mode: 'no-cors',
  header: data,
};

fetch('http://www.localhost:8080/ota/upload/config/', myInit)
  .then(result=>result.json())
  .then(body=>{
      console.log(body)
  });

我得到了以下错误（Uncaught SyntaxError指向以下行：.then(result=>result.json())）：

我测试了使用http://jsonplaceholder.typicode.com/posts进行fetch操作，它正确获取了数据。

可能出现了什么问题？我有什么遗漏吗？

编辑

我尝试了以下操作，但是收到了'Network response was not ok.的错误，并在编辑2中记录了以下信息：

  fetch('http://www.localhost:8080/ota/upload/config/', myInit).then(function(response) {
    if(response.ok) {
      response.blob().then(function(myBlob) {
        var objectURL = URL.createObjectURL(myBlob);
        console.log(objectURL)
      });
    } else {
      console.log('Network response was not ok.');
    }
  })
  .catch(function(error) {
    console.log('There has been a problem with your fetch operation: ' + error.message);
  });

编辑2 - 额外信息

- Jo Ko

---

这是“headers”而不是“header”。 - azium

@azium 尝试了但不幸没有成功... - Jo Ko

Answer 1

我建议您查看 fetch API 文档，但我有一些一般性的建议：

1）通常在从API获取数据时，我会包含错误处理，因为您不具备足够的信息来了解请求失败的确切原因。文档中有一个很好的示例：

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    response.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });
  } else {
    console.log('Network response was not ok.');
  }
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

2. 这只是一种有根据的猜测，但根据我从错误信息中收集到的有限信息来看，您正在使用HMR - 它会修改一些代码 - 特别是与组件内部状态传播相关的代码。

因此，我建议使用文档作为指南（可能需要使用catch）记录error.message，如果您还没有解决问题，那么我认为我们需要更多上下文（例如在组件中的位置？您如何传播状态等等）

编辑：或者也许只是笔误 - 但是-良好的错误处理很重要，并且在使用HMR时有一些“陷阱”

- user3606123

---

尝试了错误处理，但是出现了以下问题：GET http://www.localhost:8080/ota/upload/config/ 415 ()和Network response was not ok.。至于第二个建议，以完全相同的方式获取另一个URL成功了，所以我认为HMR没问题，到目前为止也没有出现任何问题。可能是什么问题呢？ - Jo Ko

记录了服务器的响应。将其放在原始帖子上。 - Jo Ko

只是确认一下你是否收到了我的消息，请告诉我。 - Jo Ko

Answer 2

不要使用 localhost，而要使用 IP 地址

fetch('SYSTEM_IP_ADDRESS:8080/ota/upload/config/', myInit)
  .then(result=>result.json())
  .then(body=>{
  console.log(body)
    });

- keerthi c

Answer 3

可能您正在测试的浏览器不支持=>，尽管Chrome支持它。您应该将箭头函数替换为常规函数，然后查看是否一切正常。

以下是支持它的浏览器列表：

来源

如果是这种情况，你可以使用 Babel 和/或 Webpack 进行转译。

- Andre Pena

---

我已经在使用Babel和Webpack，但仍然遇到了那个错误。 - Jo Ko