我使用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'上允许跨域脚本资源。
答案 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:确定
然后我使缓存无效,并且它可以工作。
希望它可以帮助未来的人们。