GET 请求适用于 Postman,但为什么它不适用于 ReactJS 获取?
GET request works with Postman but why doesn't it work with ReactJS fetch?
当我在 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测试了获取是否正确并且它正确获取了。
可能是什么问题?我有什么想念的吗?
编辑
我尝试了以下但得到了 '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 - 附加信息
可能 =>
不受您正在测试的浏览器的支持,尽管 Chrome 支持它。你应该用常规函数替换你的箭头函数,看看现在是否一切正常。
这是支持它的浏览器列表:
如果是这样,你可以使用 Babel and/or Webpack 进行转译。
我建议查看 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
) - 如果您还没有解决问题,那么我认为我们需要更多上下文(例如与组件的相关性在哪里?你是如何传播状态的?等等)
edit: or maybe it's just a typo - but still - error handling is good and there's a few 'gotchas' with using HMR
而不是使用本地主机使用 IP 地址
fetch('SYSTEM_IP_ADDRESS:8080/ota/upload/config/', myInit)
.then(result=>result.json())
.then(body=>{
console.log(body)
});
当我在 Postman 上发出 GET 请求时,它成功地发出了 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测试了获取是否正确并且它正确获取了。
可能是什么问题?我有什么想念的吗?
编辑
我尝试了以下但得到了 '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 - 附加信息
可能 =>
不受您正在测试的浏览器的支持,尽管 Chrome 支持它。你应该用常规函数替换你的箭头函数,看看现在是否一切正常。
这是支持它的浏览器列表:
如果是这样,你可以使用 Babel and/or Webpack 进行转译。
我建议查看 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
) - 如果您还没有解决问题,那么我认为我们需要更多上下文(例如与组件的相关性在哪里?你是如何传播状态的?等等)
edit: or maybe it's just a typo - but still - error handling is good and there's a few 'gotchas' with using HMR
而不是使用本地主机使用 IP 地址
fetch('SYSTEM_IP_ADDRESS:8080/ota/upload/config/', myInit)
.then(result=>result.json())
.then(body=>{
console.log(body)
});