Блог

Я получаю странную ошибку после того, как вкладка / сеанс Chrome простаивает в моем приложении React. Я использую клиент Apollo GraphQL.

Я не рассчитал его точно, но после того, как я просидел на странице более 30 минут или около того, если бы я щелкнул, чтобы переключиться на маршрут, и была бы попытка получить некоторые данные с сервера, я бы получил эту ошибку:

 Access to fetch at 'https://xxxxxxxxx.execute-api.xxxxxxxxx.amazonaws.com/nonprod/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
  

После обновления страницы она возобновляет работу нормально.

Ниже приведен весь мой ApolloWrapper:

 const uploadLink = createUploadLink({
  uri: process.env.REACT_APP_GRAPHQL_ENDPOINT_URL,
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.map(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${
          typeof locations === 'object' ? JSON.stringify(locations) : locations
        }, Path: ${path}`,
      ),
    );

  if (networkError) console.log(`[Network error]: ${networkError}`);
});

const ApolloWrapper = ({ children }) => {
  const { session, logout, refreshSession } = useContext(AuthContext);

  const retryLink = new RetryLink({
    delay: {
      initial: 0,
    },
    attempts: {
      max: 2,
      retryIf: async (err) => {
        // when unauthorize response from server, refresh id token
        if ([401, 403].includes(err.statusCode)) {
          try {
            await refreshSession();
          } catch (error) {
            logout();
            return false;
          }
          return true;
        }
        return true;
      },
    },
  });

  const authLink = setContext((_, { headers }) => {
    // get the authentication token from local storage if it exists
    const token = session.idToken.jwtToken;
    // return the headers to the context so httpLink can read them

    return {
      headers: {
        ...headers,
        Authorization: token ? `${token}` : '',
      },
    };
  });

  const client = new ApolloClient({
    link: errorLink.concat(retryLink).concat(authLink).concat(uploadLink),
    cache: new InMemoryCache(),
  });

  return <ApolloProvider client={client}>{children}</ApolloProvider>;
};

export default ApolloWrapper;
  

Я подумал, что, возможно, срок действия моего токена истекает, но я обновляю его, поэтому я не думаю, что там происходит что-то странное.

Заглядывая в Chrome DevTools, он не выдает мне никакого кода ответа HTTP, и я даже не обращаюсь к серверной части, поскольку мои журналы CloudWatch ничего не показывают.

Что может быть причиной этого?