GET 请求适用于 Postman，但为什么它不适用于 ReactJS fetch？答案

【问题标题】：GET request works with Postman but why doesn't it work with ReactJS fetch?GET 请求适用于 Postman，但为什么它不适用于 ReactJS fetch？
【发布时间】：2016-12-16 05:31:29
【问题描述】：

当我在 Postman 上发出 GET 请求时，它成功发出 GET 请求：

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

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. 并在 EDIT 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 - 附加信息

【问题讨论】：

是headers 不是header
@azium 试过但不幸的是没有用...

标签： javascript json reactjs fetch postman

【解决方案1】：

而不是使用本地主机使用IP地址

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

【讨论】：

【解决方案2】：

我建议查看fetch API documentation - 但我有一些一般性建议：

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

这是一个有根据的猜测，但根据我从错误消息中收集的有限信息，您使用的是HMR - 它确实修改了一些代码 - 特别是与状态在组件内的传播方式有关。

所以首先我会推荐。控制台使用文档作为指南记录error.message（可能catch）-如果您还没有解决问题，那么我认为我们需要更多上下文（例如这与组件的关系在哪里？你是如何传播的国家？等等）

编辑：或者这只是一个错字 - 但仍然 - 错误处理很好，使用 HMR 有一些“陷阱”

【讨论】：

尝试了错误处理，但得到以下结果：GET http://www.localhost:8080/ota/upload/config/ 415 () 和 Network response was not ok.。至于第二个建议，获取到另一个 URL 但以完全相同的方式工作，所以我认为 HMR 很好，到目前为止还没有带来任何麻烦。可能是什么问题？
也记录了来自服务器的响应。把它放在原来的帖子上。
只是检查您是否收到我的消息。请告诉我

【解决方案3】：

可能=> 不受您正在测试它的浏览器的支持，即使 Chrome 支持它。你应该用常规函数替换你的箭头函数，看看现在是否一切正常。

这是支持它的浏览器列表：

source

如果是这样，您可以使用 Babel 和/或 Webpack 进行转译。

【讨论】：

我已经在使用 Babel 和 Webpack 但仍然出现该错误