GET 请求适用于 Postman,但为什么它不适用于 ReactJS fetch?

Jo *_* Ko 6 javascript json fetch reactjs postman

当我在 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)
  });
Run Code Online (Sandbox Code Playgroud)

我收到以下错误(未捕获的 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);
  });
Run Code Online (Sandbox Code Playgroud)

编辑 2 - 附加信息

在此处输入图片说明

小智 4

我建议查看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);
});
Run Code Online (Sandbox Code Playgroud)
  1. 这是一个有根据的猜测,但根据我从错误消息中收集的有限信息,您正在使用HMR- 它确实修改了一些代码 - 特别与状态在组件内传播的方式相关。

所以首先我会建议。控制台记录error.message使用文档作为指南(问题catch) - 如果您还没有解决问题,那么我认为我们需要更多上下文(例如与组件的关系在哪里?您如何传播状态?等等)

编辑:或者也许这只是一个拼写错误 - 但仍然 - 错误处理很好,并且使用 HMR 存在一些“陷阱”