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时，它返回了我的常规错误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>

我想提到的是，它可以在localhost上运行，但不能在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]源'https://websitelink.app'无法在'res：//edgehtml.dll/xmltreeview.js'上允许跨域脚本资源。

Answer 1

这是BrowserRouter的一个众所周知的“问题”，在这种情况下，“服务器端”必须了解并能够处理对路由器处理的路径的请求。解决该问题的方法是将所有404从CloudFront重定向到您的index.html，然后让您的React应用程序为您处理。

实现该目标的方法是在CloudFront（https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/custom-error-pages.html）中配置自定义错误响应。

Answer 2

我找到了答案！ 基本上，谷歌浏览器会绕过此类错误，并与React Router配合使用以返回页面。为了使其在Microsoft Edge上运行，我必须：

1）前往Cloudfront

2）编辑自定义错误响应

3）将HTTP代码更改为403：禁止；自定义错误响应：是；响应页面路径：/Index.html; HTTP响应代码：200：确定

然后我使缓存无效，并且它可以工作。

希望它可以帮助未来的人们。

Only link that helped me