AWS в IE против AWS в Chrome?

Question

Я размещаю свое приложение ReactJs на AWS с S3 и Cloudfront.Я настроил свою маршрутизацию с помощью response-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, которая отображает ошибку, когда пользователь пытается получить доступ к несуществующей странице.Проблема в том, что теперь я размещаю свое приложение activjs на AWS, и когда я использую Chrome, оно возвращает мою обычную ошибку - страницу 404.

Когда я использую Microsoft Edge в AWS, я получаю следующее:

<?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] Источник 'https://websitelink.app' не смог разрешить ресурс сценария с несколькими источниками в at'res: //edgehtml.dll/xmltreeview.js '.

Answer 1

Я нашел ответ!В основном Google Chrome обходил такие ошибки и работал с реагирующим маршрутизатором, чтобы вернуть страницу.Чтобы заставить его работать в Microsoft Edge, мне пришлось:

1) Перейти в Cloudfront

2) Изменить пользовательский ответ об ошибке

3) Изменить код HTTP на 403:Запретный;Настроить ответ об ошибке: Да;Путь к странице ответа: /Index.html;Код HTTP-ответа: 200: ОК

Затем я делаю кэш-память недействительной, и она работает.

Надеюсь, это поможет будущим людям.

Единственная ссылка, которая помогла мне

Answer 2

это очень известная «проблема» с BrowserRouter - в этом случае «серверная сторона» должна знать и уметь обрабатывать запросы к путям, обрабатываемым маршрутизатором.Способ решения этой проблемы состоит в том, чтобы перенаправить все 404 с CloudFront на ваш index.html и позволить вашему приложению React справиться с этим за вас.

Способ достижения этого заключается в настройке пользовательского реагирования на ошибки в CloudFront (https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/custom-error-pages.html).