时间戳

首页 > 解决方案 > 如何读取在 React 应用程序之外发出的请求的 http 状态？

javascript - 如何读取在 React 应用程序之外发出的请求的 http 状态？

问题描述

当用户尝试从与我们的 ReactJS 应用程序相同的路径（例如 http:/www.app.com/view/doc1/something.jpg）直接访问文件（例如 JPG）时，我们有一个 Cloudfront 操作 - 即请求首先到达云端，它会决定你是否拥有权限或者它是否存在，或者提供它 - 或者让你回到我们的 React 应用程序。

在浏览器网络活动列表中，对文件的请求在那里，并从云端返回，例如 403。

如何将该文件上的 http 请求状态读入 React 应用程序本身，以便我们可以处理 403/404 等？

我们目前只是在路线上匹配正则表达式，并期望如果您返回到 react 应用程序，出现问题并且有一个通用的“您无法获取此文件”页面 - 但我们希望提供服务基于状态码向用户发送更优雅的消息。

另一个概念是在这个文件路径上有一个登录页面，并让 react 应用程序触发预检以查看他们是否能够直接访问文件 - 并使用预检中的状态优雅地处理用户的响应.

或者，我希望能够询问浏览器对文件 x 的请求，并将其请求状态代码获取到 React 应用程序中以对其进行操作 - 或者听到其他人完成此操作的任何包或方式......

标签： javascriptreactjs

解决方案

我们的项目中也有类似的情况，所以我们将 axios 库包装在自定义HttpInterceptor包装器中。这个包装HttpInterceptor拦截器所有由您的浏览器进行的调用。 

let HttpInterceptor = axios.create({
  headers: {
    Accept: "image/jpeg" 
  }
});

HttpInterceptor.interceptors.response.use(
  response => {
    if (response.status !== 200) {
      // Redirect or Do whatever yu want to do if call fails
    }
    return response;
  },
  function(error) {
    throw error;
  }
);
export default HttpInterceptor;

推荐阅读