为什么邮递员显示错误消息但反应应用程序不显示它？

Question

我正在开发 API（使用 nodejs 的 AWS lambda 函数）。我在这里检查通过 HTTP POST 发送到 API 的文件是否小于 2 MB。如果它们超过那个，那么我会报错。

import createError from "http-errors";

if (totalSize > sizeLimitInMB) {
    throw new createError.Forbidden(
      `Size of all the attachments combined should not exceed ${sizeLimitInMB} MB. The files you have submitted are ${totalSize} MB`
    );
  }

现在 postman 可以正确显示此错误消息。但是当我尝试使用我的反应前端产生相同的情况时。我收到的是这条消息

Access to XMLHttpRequest at 'MY_API_URL' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

an error occurred  Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)

POST 'MY_API_URL' net::ERR_FAILED

我不确定为什么会出现 CORS 错误，因为如果我的文件小于 2 MB，它就可以工作。我在反应组件中的代码

try {
      await submit(id, data);
      setSaving(false);
      history.replace("/");
    } catch (error) {
      setSaving(false);
      console.error("an error occurred ", error);
    }

为什么前端无法控制台记录与邮递员相同的错误消息？这不仅仅是因为这个特定的尺寸错误。我抛出的任何其他错误，例如“只有所有者可以删除此文件”或“Post 未找到此 ID”也不会显示在我的前端，但在邮递员

中工作得很好

Answer 1

我能够通过更改公共中间件中的中间件顺序来解决这个问题。我有一个用于包装处理程序的通用中间件函数

export const handler = commonMiddleware(myHandler);

Earlier it was
export default (handler) =>
  middy(handler).use([
    httpJsonBodyParser(),
    httpEventNormalizer(),
    httpErrorHandler(),
    cors(),
  ]);

After
export default (handler) =>
  middy(handler).use([
    cors(),
    httpJsonBodyParser(),
    httpEventNormalizer(),
    httpErrorHandler(),
  ]);

成功了

为什么邮递员显示错误消息但反应应用程序不显示它？

Why is postman showing error message but react app not showing it?

api

amazon-web-services

node.js

reactjs

postman