5

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

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

在此处输入图像描述

如何找到此问题的潜在原因？

在此处输入图像描述

更新

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

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

https://URL.com/listing/LISTING_ID

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

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

4

4 回答 4

3

我通过从 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;
        }

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

于 2020-02-05T22:05:18.900 回答
3

由于多种原因，Amazon S3 将返回 403 错误并显示类似这样的消息，但人们没想到的最常见的错误是对象不存在时。您将收到此错误，而不是 404。

https://aws.amazon.com/premiumsupport/knowledge-center/s3-troubleshoot-403/

于 2020-01-29T21:09:58.043 回答
0

您的问题中没有足够的信息来理解问题（您遇到什么错误，您的设置是什么，“直接调用它”是什么意思？）。

也就是说，我的假设是您在 NginX 上托管一个单页应用程序。您已将默认页面设置为 index.html，因此当您调用根路径时，您会得到应用程序的服务，但是当在地址栏中输入路由的路径时，您会得到 404。

如果是这样，这是一个很容易解决的问题。您正在调用https://URL.com/listing/LISTING_ID并且 NginX 正在尝试在该位置查找静态资源。您需要拦截 404 响应并返回您的 index.html 文件。然后，您的客户端将访问您的 React 路由器，您将获得预期的页面。

将此添加到您的 NginX 配置中：

error_page 404 = 200 /index.html;
于 2020-02-09T17:58:30.917 回答
0

您是否在服务器端正确设置了 CORS？通过正确的 CORS 设置，您的客户端 JS 代码可以从其源访问不同的服务器。

于 2020-02-12T03:57:35.830 回答