IE上的AWS与Chrome上的AWS?

时间:2018-12-02 21:42:37

标签: reactjs amazon-web-services amazon-s3 react-router amazon-cloudfront

我使用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上发生。可能来自存储桶策略或权限限制?

Public access settings Bucket policy

当我看到错误页面时,尽管它可以在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'上允许跨域脚本资源。

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

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

1)前往Cloudfront

2)编辑自定义错误响应

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

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

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

Only link that helped me