在没有查询参数的静态托管站点上使用动态 URL答案

【问题标题】：Using dynamic URL on a site that is staticly hosted without query params在没有查询参数的静态托管站点上使用动态 URL
【发布时间】：2022-01-26 23:09:39
【问题描述】：

我目前正在尝试创建一个静态网站。我使用 JavaScript 向我的 API 发出请求并获取页面的内容。但我的问题是我不希望链接使用查询参数，例如 example.com/list?item=item-id 我希望它是 example.com/list/item-id。

我的问题的一个很好的例子是如何重新创建快速路由 app.get('/list/:item_id') 与静态网站上的链接，服务器不会抛出 404，因为页面没有存在，但它会将 exaple.com/list/item1 和 example.com/list/item2 路由到客户端 javascript 将确定该页面是否存在的同一页面。

【问题讨论】：

如何静态托管 API？
不，我在 aws 上使用弹性 bean stock 运行我的 API。这个项目的目的是，当我创建网站时，我可以将我的客户端集成到我的 API 中，这样我就不需要为每个网站创建后端。现在对于我客户的网站，我了解从 API 获取信息。我的问题的一个很好的例子是如何使用静态网站上的链接重新创建快速路由 app.get('/list/:item_id')，其中服务器不会抛出 404，因为该页面不存在。
但它会将 exaple.com/list/item1 和 example.com/list/item2 路由到客户端 javascript 将确定该页面是否存在的同一页面。
如果您想要一个路径来提供 HTML 文档，那么 服务器 需要为该路径提供 HTML 文档。没有办法避免这种情况。许多服务器可以配置为为所有无法解析为文件的 URL 提供相同的 HTML 文档，但是 (a) 非常糟糕，因为它破坏了 404 处理并使客户端完全依赖于能够运行 JS (b) 很大程度上取决于您的 HTTP 服务器。

标签： javascript html hosting

【解决方案1】：

这取决于您使用哪个网络服务器来托管您的静态网站。这是使用托管在 Apache 上的静态站点的一种方法：

`.htaccess`:

# Allow static files to have extended paths
AcceptPathInfo On
# Default charset
AddDefaultCharset utf-8
# Make sure that an HTML file name "list"
# (with no .html extension) gets the right content type
AddType text/html list

`list`（一个没有`.html`扩展名的HTML文件）：

<!doctype html> 
<html>
  <head>
    <script>
      alert(location.pathname)
    </script>
  </head>
  <body>
    HELLO WORLD
  </body>
</html>

我在我的 Apache 服务器上测试了这个配置。当我访问https://example.com/list/item-id 时，Apache 将/list 的内容作为 HTML 提供。该 HTML 中的 JavaScript 提醒 /list/item-id。

您的 JavaScript 必须从路径名中解析项目 id 并使用它调用您的 API。

您可以使用其他技术为多个不同路径提供单个 HTML 文件。使用由a rewrite rule 驱动的front controller 是很常见的。您还可以使用multiviews 来获得与 Apache 的内容协商模块相同的结果。

如果您想在 Nginx 或 IIS 等其他 Web 服务器上托管静态内容，则需要找到类似的技术。

【讨论】：

是否可以在dns设置中配置
不，DNS 仅将域名指向特定的 IP 地址。它根本无法控制 URL 路径。
我正在使用 s3 来托管我的静态网站我对处理托管有点陌生。这是一种可以在 s3 上运行的方法，还是我可以学到其他东西可以让我使用 s3 来做到这一点，因为我试图避免启动另一个实例？此外，如果我保持它使用查询参数的方式是我唯一的选择？
您必须在 S3 前面使用 Cloudfront 才能在其中获得该行为：aws.amazon.com/premiumsupport/knowledge-center/…
太棒了，谢谢

.htaccess:

list（一个没有.html扩展名的HTML文件）：

`.htaccess`:

`list`（一个没有`.html`扩展名的HTML文件）：