浏览器返回 403 Access Error 可能是 AWS 导致的
403 Access Error returned from Browser possibly caused by AWS
我在 AWS amplify 上托管了我的无服务器 Web 应用程序。如果我尝试刷新页面，我会收到拒绝访问错误 XML。当我查看控制台时，它没有显示任何输出。该代码在 localhost 上运行良好，但会导致 403 错误。
我找到了 question that is very similar，只是我没有使用 CloudFront。
我怎样才能找到这个问题的潜在原因？
更新
我解决了这个问题，我把答案贴在了答案部分。但是我现在有了这个问题的第 2 部分。
如何让客户可以直接调用我的 URL 像这样：
https://URL.com/listing/LISTING_ID
现在，如果我尝试在传递 LISTING_ID 时直接调用它，页面就会出错。这和 Isomorphic ReactJs 有关系吗？
我试过使用 Digital Ocean 作为我的网络托管服务而不是 AWS。发生同样的错误。
Amazon S3 会 return 出现 403 错误和这样的消息，原因有很多，但最常见的是人们没有预料到的是对象不存在。您将收到此错误，而不是 404。
https://aws.amazon.com/premiumsupport/knowledge-center/s3-troubleshoot-403/
我通过从 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;
}
发生这种情况的原因是因为我的应用程序是单页应用程序。刷新导致浏览器向服务器请求，服务器不处理请求
您的问题中没有足够的信息来理解问题（您遇到了什么错误，您的设置是什么，'calling it directly' 是什么意思？）。
也就是说，我的假设是您在 NginX 上托管单页应用程序。您已将默认页面设置为 index.html，因此当您调用根路径时，您将获得应用程序服务，但是当在地址栏中输入路由路径时，您将收到 404。
如果是这样，这是一个很容易解决的问题。您正在调用 https://URL.com/listing/LISTING_ID 并且 NginX 正在尝试在该位置查找静态资源。您需要截取 404 响应并 return 您的 index.html 文件。然后您的客户端将点击您的 React 路由器，您将获得预期的页面。
将此添加到您的 NginX 配置中：
error_page 404 = 200 /index.html;
您是否在服务器端正确设置了 CORS？通过适当的 CORS 设置，您的客户端 JS 代码可以从其来源访问不同的服务器。
出现此错误是因为 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)
我在 AWS amplify 上托管了我的无服务器 Web 应用程序。如果我尝试刷新页面，我会收到拒绝访问错误 XML。当我查看控制台时，它没有显示任何输出。该代码在 localhost 上运行良好，但会导致 403 错误。
我找到了 question that is very similar，只是我没有使用 CloudFront。
我怎样才能找到这个问题的潜在原因？
更新
我解决了这个问题，我把答案贴在了答案部分。但是我现在有了这个问题的第 2 部分。
如何让客户可以直接调用我的 URL 像这样：
https://URL.com/listing/LISTING_ID
现在，如果我尝试在传递 LISTING_ID 时直接调用它，页面就会出错。这和 Isomorphic ReactJs 有关系吗？
我试过使用 Digital Ocean 作为我的网络托管服务而不是 AWS。发生同样的错误。
Amazon S3 会 return 出现 403 错误和这样的消息，原因有很多，但最常见的是人们没有预料到的是对象不存在。您将收到此错误，而不是 404。
https://aws.amazon.com/premiumsupport/knowledge-center/s3-troubleshoot-403/
我通过从 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;
}
发生这种情况的原因是因为我的应用程序是单页应用程序。刷新导致浏览器向服务器请求，服务器不处理请求
您的问题中没有足够的信息来理解问题（您遇到了什么错误，您的设置是什么，'calling it directly' 是什么意思？）。
也就是说，我的假设是您在 NginX 上托管单页应用程序。您已将默认页面设置为 index.html，因此当您调用根路径时，您将获得应用程序服务，但是当在地址栏中输入路由路径时，您将收到 404。
如果是这样，这是一个很容易解决的问题。您正在调用 https://URL.com/listing/LISTING_ID 并且 NginX 正在尝试在该位置查找静态资源。您需要截取 404 响应并 return 您的 index.html 文件。然后您的客户端将点击您的 React 路由器，您将获得预期的页面。
将此添加到您的 NginX 配置中：
error_page 404 = 200 /index.html;
您是否在服务器端正确设置了 CORS？通过适当的 CORS 设置，您的客户端 JS 代码可以从其来源访问不同的服务器。
出现此错误是因为 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)