从 React 客户端请求节点服务器时出现 500 内部服务器错误答案

【问题标题】：500 internal server error on request to Node server from React client从 React 客户端请求节点服务器时出现 500 内部服务器错误
【发布时间】：2022-01-21 05:59:12
【问题描述】：

在我的 React/Node/Express 应用程序中，我在尝试从客户端 (React) 向服务器 (Node.js) 进行 API 调用时收到 500 内部服务器错误。客户端根据 URL 参数（GET api/carbon-interface/models/:makeid）向车辆模型发出 GET 请求。 /carbon-interface 路由然后进行第 3 方 API 调用以获取车辆模型数据。在 500 错误消息中，我收到“strict-origin-when-cross-origin”推荐人策略消息。我尝试将 "Access-Control-Allow-Origin": "*" 添加到两个 GET 请求的标头中，但似乎没有任何效果。任何想法可能导致此错误？我是创建 API 的新手，所以对于任何基本错误我深表歉意。我的代码如下：

React 中的客户端 API 调用：

// When selectedMake is updated, get models data from GET /carbon-interface.
  // Then populate vehicle models dropdown
  useEffect(() => {
   const getVehicleModels = async (makeid) => {
      try {
        const res = await axios.get(`/api/carbon-interface/models/${makeid}`, {
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "*",
          },
        });
        console.log(res.data);
      } catch (err) {
        console.error(err);
      }
    };

    getVehicleModels(selectedMake.id);
  }, [selectedMake]);

对第 3 方的服务器 API 调用：

// @route     GET api/carbon-interface/models/:makeid
// @desc      Get vehicle models
// @access    Public
router.get("/models/:makeid", async (req, res) => {
  const makeId = req.params.makeid;
  try {
    const response = await axios.get(
      `https://www.carboninterface.com/api/v1/vehicle_makes/${makeid}/vehicle_models`,
      {
        headers: {
          Authorization: `Bearer ${config.CARBON_INTERFACE_BEARER_TOKEN}`,
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*",
        },
      }
    );
    response.set("Access-Control-Allow-Origin", "*");

    console.log(response.data);
  } catch (err) {
    console.error(err.message);
    return res.status(500).send(err);
  }
});

【问题讨论】：

标签： node.js reactjs express

【解决方案1】：

axios.get 返回的response 没有set 方法，因为它不是一个快速响应对象。因此，您的 response.set("Access-Control-Allow-Origin", "*") 语句会引发异常，您会捕获该异常并将其转换为 500 Internal Server Error。

你可能想要的是

res.set("Access-Control-Allow-Origin", "*");

但这可以通过额外的中间件更好地实现

router.use(cors());

之前router.get("/models/:makeid", ...)。（参见cors 包。）

【讨论】：