Reactjs 获取at<；URL>；从原点<；本地主机>；已被CORS策略为空闲chrome会话阻止

在我的React应用程序上的Chrome选项卡/会话空闲后，我遇到了一个奇怪的错误。我正在使用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.

在我刷新页面后，它恢复正常工作

以下是我的全部简历：

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;

const uploadLink=createUploadLink({
uri:process.env.REACT\u APP\u GRAPHQL\u ENDPOINT\u URL，
});
const errorLink=onError（{graphQLErrors，networkError}）=>{
如果（图形错误）
graphQLErrors.map（{message，locations，path}）=>
console.log(
`[GraphQL错误]：消息：${Message}，位置：${
typeof locations==='object'？JSON.stringify（位置）：位置
}，路径：${Path}`，
),
);
if（networkError）console.log（`[networkError]：${networkError}`）；
});
常量（{children}）=>{
const{session，logout，refreshSession}=useContext（AuthContext）；
const retryLink=新retryLink({
延迟：{
首字母：0，
},
尝试：{
最高：2，
重试：异步（错误）=>{
//当未授权服务器响应时，刷新id令牌
如果（[401403].includes（err.statusCode））{
试一试{
等待刷新会话（）；
}捕获（错误）{
注销（）；
返回false；
}
返回true；
}
返回true；
},
},
});
const authLink=setContext（（{headers}）=>{
//从本地存储中获取身份验证令牌（如果存在）
const token=session.idToken.jwtToken；
//将标题返回到上下文，以便httpLink可以读取它们
返回{
标题：{
…标题，
授权：令牌？${token}:“”，
},
};
});
const客户端=新客户端({
链接：errorLink.concat（retryLink）.concat（authLink）.concat（uploadLink），
缓存：新的InMemoryCache（），
});
返回{children}；
};
导出默认包装器；

我想这可能是我的代币到期了，但我正在刷新它，所以我不认为那里发生了什么奇怪的事情

查看Chrome开发工具，它没有给我任何类型的HTTP响应代码，我甚至没有访问后端，因为我的CloudWatch日志没有透露任何信息

这可能是什么原因造成的