Reactjs IE上的AWS vs Chrome上的AWS？

我使用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>

我想说的是，它可以在localhost上工作，但不能在AWS上工作。 此外，当我尝试访问Microsoft Edge上的现有页面时，也会出现此错误。谷歌浏览器上不会出现这种情况。可能是由于bucket策略或权限限制

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

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

SEC7120:[CORS]源“”在“”处允许跨源脚本资源失败res://edgehtml.dll/xmltreeview.js"

---

这是

浏览器路由器的一个众所周知的“问题”

——在这种情况下，“服务器端”必须意识到并能够处理对路由器处理的路径的请求。解决这个问题的方法是将所有404从CloudFront重定向到您的

index.html

，并让您的React应用程序为您处理

---

实现这一点的方法是在CloudFront（）中配置自定义错误响应。

这是

BrowserRouter的一个众所周知的“问题”

——在这种情况下，“服务器端”必须知道并能够处理对路由器处理的路径的请求。解决这个问题的方法是将所有404从CloudFront重定向到您的

index.html

，并让您的React应用程序为您处理

实现这一点的方法是在CloudFront（）中配置自定义错误响应。

我找到了答案！ 谷歌Chrome基本上绕过了这些错误，使用react路由器返回页面。为了在Microsoft Edge上运行，我必须：

1） 去前线

2） 编辑自定义错误响应

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

然后我使缓存失效，它就工作了

希望它能帮助未来的人们

我找到了答案！ 谷歌Chrome基本上绕过了这些错误，使用react路由器返回页面。为了在Microsoft Edge上运行，我必须：

1） 去前线

2） 编辑自定义错误响应

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

然后我使缓存失效，它就工作了

希望它能帮助未来的人们

---

谢谢你的回答。我已经为错误路径设置了index.html。我仍然不明白为什么在Chrome中错误处理得很好，但在Edge上却没有。我正在尝试不同的桶策略，并回来更新！谢谢你的回答。我已经为错误路径设置了index.html。我仍然不明白为什么在Chrome中错误处理得很好，但在Edge上却没有。我正在尝试不同的桶策略，并回来更新！

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