IE 上的 AWS 与 Chrome 上的 AWS？

Question

我使用 S3 和 Cloudfront 在 AWS 上托管我的 ReactJs 应用程序。我用 react-router-dom:

设置我的路由

import { BrowserRouter, Route, Switch } from 'react-router-dom';
<BrowserRouter>
    <Switch>
      <Route path="/" component={App} exact />
      <Route path="/Aboutus" component={Aboutus} exact />

      <Route
      path="/FAQ"
      component={FAQ}
      exact
      />
      <Route path="/Anotherpage" 
      component={Anotherpage}
      exact 
      />
      <Route component={Error} />
    </Switch>
  </BrowserRouter>

错误是一个 404 页面，当用户试图访问一个不存在的页面时会显示错误。问题是现在我在 AWS 上托管我的 reactjs 应用程序，当我使用 Chrome 它 returns 我的正常错误，404 页面。

当我在 AWS 上使用 Microsoft Edge 时，我得到的是：

<?xml version="1.0" encoding="ISO-8859-1"?>
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>D67C9C85E199DB09</RequestId>
<HostId>ENUq1f864JgnJjLbtAyo7Md0l1GMrA5u6....</HostId>
</Error>

我想提一下，它可以在本地主机上运行，但不能在 AWS 上运行。此外，当我尝试访问 Microsoft Edge 上的现有页面时，也会出现此错误。它不会发生在 Google Chrome。可能是存储桶策略或权限限制？

当我收到错误页面时，尽管它在 Chrome 上有效，但我可以在控制台中看到以下错误：

> HTTP403: FORBIDDEN - The server understood the request, but is refusing to fulfill it. GET - https://websitelink.app/Anotherpage

SEC7120: [CORS] The origin 'https://websitelink.app' failed to allow a cross-origin script resource at'res://edgehtml.dll/xmltreeview.js'.

Answer 1

这是一个众所周知的 'issue' 和 BrowserRouter - 在这种情况下 'server side' 必须知道并能够处理对路由器处理的路径的请求。解决该问题的方法是将所有 404 从 CloudFront 重定向到您的 index.html 并让您的 React 应用程序为您处理。

实现这一点的方法是在 CloudFront (https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/custom-error-pages.html) 中配置自定义错误响应。

Answer 2

我找到答案了！基本上 Google Chrome 绕过此类错误并使用 react router 操作到 return 页面。为了让它在 Microsoft Edge 上运行，我必须：

1) 前往 Cloudfront

2) 编辑自定义错误响应

3) 将 HTTP 代码更改为 403:Forbidden；自定义错误响应：是；响应页面路径：/Index.html； HTTP 响应代码：200：OK

然后我使缓存无效并且它起作用了。

希望对以后的人有所帮助。

Only link that helped me

IE 上的 AWS 与 Chrome 上的 AWS？

AWS on IE vs AWS on Chrome?

reactjs

amazon-web-services

amazon-s3

react-router

amazon-cloudfront