从浏览器返回的 403 访问错误可能由 AWS 引起

Question

我的无服务器 Web 应用程序托管在 AWS Amplify 上。如果我尝试刷新页面，我会收到拒绝访问错误 XML。当我查看控制台时，它没有显示任何输出。该代码在 上运行良好localhost，但会导致 403 错误。

我发现了一个非常相似的问题，只是我没有使用 CloudFront。

我怎样才能找到这个问题的潜在原因？

更新

我解决了这个问题，并在答案部分发布了答案。但是，我现在有了这个问题的第 2 部分。

如何让客户端可以像这样直接调用我的 URL：

https://URL.com/listing/LISTING_ID

现在，如果我尝试在传递LISTING_ID页面错误时直接调用它。这与 Isomorphic ReactJs 有什么关系吗？

我曾尝试使用 Digital Ocean 而不是 AWS 作为我的网络托管服务。发生同样的错误。

Answer 1

出现此错误是因为 Amplify 无权渲染该路由。我们需要启用这些。

在您的 Amplify 应用程序设置中，转到重写和重定向并添加这两个规则。

Source address                                             Target address          Type
/<*>                                                       /index.html             404 (Rewrite)
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>   /index.html       200 (Rewrite)

Answer 2

我通过从 AWS 迁移到 Nginx 进行托管解决了这个问题。

并将其添加到 etc/nginx/sites_available/default

location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                #try_files $uri $uri/ =404;
                try_files $uri /index.html;
        }

发生这种情况的原因是因为我的应用程序是单页应用程序。刷新导致浏览器请求服务器，服务器不处理请求。