React 中来自 API 网关的 502 错误响应但适用于 postman
当我通过测试位或通过 POSTMAN 向 API Gateway 上的 API 发送请求时,请求发送和接收正常,并且我可以获得预期的响应正文,但是,当我通过下面的代码发出 API 请求时,我收到 502 错误。
CORS 策略没有问题,因为我没有收到任何这些错误,这是我的请求代码和后续错误。
发布请求代码
fetch('https://4diopo9a77.execute-api.eu-west-2.amazonaws.com/DSA_API/imagedata', {
method: 'POST',
body :"{'A':'A'}"
}).then(function(data) {
console.log(data)
})
控制台输出
POST `API_NAME` 502
Response {type: 'cors', url: '*API_NAME*', redirected: false, status: 502, ok: false, …}
错误 1 堆栈跟踪
POSTRequest @ Home.js:15
getFileData @ Home.js:49
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
错误 2 详细信息
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 502
statusText: ""
type: "cors"
url: "*API_NAME*"
[[Prototype]]: Response
When I send a request to my API on API Gateway either through the testing bit, or through POSTMAN, the request is sent and received okay, and I can the expected response body, however, when I make the API request through the code below, I get a 502 error.
There are no issues with the CORS policies as I am not getting any of those errors, here is my request code and the subsequent errors.
POST REQUEST CODE
fetch('https://4diopo9a77.execute-api.eu-west-2.amazonaws.com/DSA_API/imagedata', {
method: 'POST',
body :"{'A':'A'}"
}).then(function(data) {
console.log(data)
})
CONSOLE OUTPUT
POST `API_NAME` 502
Response {type: 'cors', url: '*API_NAME*', redirected: false, status: 502, ok: false, …}
ERROR 1 STACK TRACE
POSTRequest @ Home.js:15
getFileData @ Home.js:49
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:4070
executeDispatch @ react-dom.development.js:8243
processDispatchQueueItemsInOrder @ react-dom.development.js:8275
processDispatchQueue @ react-dom.development.js:8288
dispatchEventsForPlugins @ react-dom.development.js:8299
(anonymous) @ react-dom.development.js:8508
batchedEventUpdates$1 @ react-dom.development.js:22396
batchedEventUpdates @ react-dom.development.js:3745
dispatchEventForPluginEventSystem @ react-dom.development.js:8507
attemptToDispatchEvent @ react-dom.development.js:6005
dispatchEvent @ react-dom.development.js:5924
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
discreteUpdates$1 @ react-dom.development.js:22413
discreteUpdates @ react-dom.development.js:3756
dispatchDiscreteEvent @ react-dom.development.js:5889
ERROR 2 DETAILS
body: ReadableStream
bodyUsed: false
headers: Headers {}
ok: false
redirected: false
status: 502
statusText: ""
type: "cors"
url: "*API_NAME*"
[[Prototype]]: Response
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
需要将 Cors 标题添加到响应中,浏览器阻止响应,因为它没有返回标题,添加了这个并且它起作用了:
“Access-Control-Allow-Origin”:'*'
所以我在 lambda 中的返回看起来像这样:
Cors headings needed to be added to the response, the browser was blocking the response as it wasn't returning the heading, added this and it worked:
"Access-Control-Allow-Origin": '*'
So my return in the lambda looked like this: