首页 > 解决方案 > 无法连接到 API 资源

问题描述

我创建了一个 React 前端,它向我的 api 发出 axios 发布请求。来自前端的代码在用户成功登录后被调用。用户登录成功后,通过 cookie 发送身份验证令牌,该 cookie 用于验证用户是否是管理员并且能够访问api 资源 /api/v1/orders。这在我在本地环境中时有效,但是在我将其上传到云端后,我收到此错误:

<MY_API>/api/v1/orders:1 Failed to load resource: the server responded with a status of 500 (Internal Server Error)

Adminpage.js:31 Error: Request failed with status code 500
    at e.exports (createError.js:16)
    at e.exports (settle.js:17)
    at XMLHttpRequest.p.onreadystatechange (xhr.js:62)

反应前端

管理页面.js

const loadOrders = async () => {
    try {
      const res = await axios.get(
        "<MY_API>/api/v1/orders",
        {
          withCredentials: true,
        }
      );
      console.log(res.data.data.orders);
      setOrderData([...res.data.data.orders]);
    } catch (err) {
      console.log(err);
    }
  };

节点后端

orderRoutes.js

router
  .route('/')
  .get(
    // Only admins can access this route
    authController.requireSignin,
    authController.isAdmin,
    orderController.getAllOrders
  )
  .post(orderController.addOrder);

authController.js

exports.requireSignin = expressJwt({
  secret: process.env.JWT_SECRET,
  algorithms: ['HS256'], // added later
  requestProperty: 'auth', // Decodes the token and assigns to auth object in request object
  getToken: function (req) {
    if (req.cookies.Authorization) {
      return req.cookies.Authorization;
    }
    return null;
  },
});

exports.isAdmin = (req, res, next) => {
  // If users role specified in the req.auth object is not admin, an error is passed to the global error handler otherwise, is able to go to the next function
  if (req.auth.role !== "admin") {
    return next(
      new ApiError(undefined, 403, "User is not authorized for access!")
    );
  }
  next();
};

我的前端 React 代码托管在 AWS 上,我的后端 Nodejs 托管在 Azure 上。

标签: node.jsamazon-web-servicesazure

解决方案


听起来像一个CORS问题。您是否在托管 API 的应用服务中启用了 CORS?https://github.com/uglide/azure-content/blob/master/articles/app-service-api/app-service-api-cors-consume-javascript.md


推荐阅读