Question

我使用Firebase托管部署了一个Polymer webapp。

视图之间的路由有效，但错误页面处理不是。

我已经成功地使用官方的 polymer-2-starter-kit 示例在一个最小的例子中重现了这个问题：

https://fir-polymer-404-issue.firebaseapp.com/

例如，如果您打开以下URL，则不会显示错误页面：

https://fir-polymer-404-issue.firebaseapp.com/not-existing

相反，我收到以下错误：

my-not-existing.html:56 Uncaught SyntaxError: Identifier 'baseUrl' has already been declared
    at my-not-existing.html:56
(anonymous) @   my-not-existing.html:56

上一个示例中使用的配置文件 firebase.json 位于：

{
  "hosting": {
    "public": ".",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

我想让Polymer进行错误页面处理。

请注意，polymer serve投放的相同应用可以正常使用。

似乎问题来自Firebase托管配置。所有流量都会重定向到index.html，因此当Polymer加载不存在的页面时，Firebase服务器会返回HTTP 200响应。不幸的是，我不知道如何解决问题。

我尝试仅使用以下配置文件为非404响应创建重定向：

{
  "hosting": {
    "public": ".",
    "redirects": [
      {
        "source": "**",
        "destination": "/index.html",
        "type": 200
      }
    ]
  }
}

不幸的是， type 属性只能用于3xx代码：

Error: HTTP Error: 400, hosting.redirects[0].type is not one of enum values: 301,302,303,304,305,307,308

另请注意，自定义 404.html 文件为placed at the root。

我看到的唯一解决方案是列出所有现有路线（每个文件），但它看起来很疯狂。

欢迎任何想法。

Answer 1

firebase或聚合物无法处理您的404页面的原因是当您请求不存在的页面时，它不仅会返回状态代码200，而且还会继续使用index页面的HTML返回，因此它会显示某些内容，尽管这些内容确实没有。

现在聚合物的设置方式它会在src文件夹中查找视图，因此您只需要在根目录而不是src文件夹中进行重写。因此，请将firebase.json更改为

{
    "hosting": {
        "public": ".",
        "rewrites": [{
            "source": "/*",
            "destination": "/index.html"
        }]
    }
}

单*表示文件但不表示子文件夹，如果您在地址栏中输入，这将允许您的路由工作，但如果找不到页面，则404将由聚合物处理路由。我已经使用聚合物启动包设置了一个firebase应用程序。

https://testforsoissue.firebaseapp.com/view2

会工作并将您转到view2，因为初始请求将被重写以返回index.html，但/src/my-view2.html的请求将不会

而未定义的路线

https://testforsoissue.firebaseapp.com/not-existing

将抛出404（聚合物），因为初始请求将再次被重写以返回index.html，但/src/my-not-existing.html的请求将不会，并且将很乐意抛出404！

P.S。错误'baseUrl' has already been declared'的原因是由于页面使用了index.html两次，它在顶部声明了baseUrl

修改

如果你有子路径似乎可以像firebase.json一样使用

{ "hosting": { "public": ".", "rewrites": [{ "source": "!/src/*", "destination": "/index.html" }] } }

Answer 2

根据documentation，您无需进行处理;只需创建一个404.html：

当用户尝试访问不存在的页面时，您可以指定要提供的自定义404 / Not Found错误。只需将404.html页面添加到项目的公共目录中，当Firebase托管需要向用户显示404未找到错误时，将显示此页面的内容。

要避免baseUrl错误，如果您有权访问以下代码行：

let baseUrl = document.querySelector('base').href;

尝试将其更改为：

baseUrl = baseUrl || document.querySelector('base').href;

它不是很整洁，但它不应该抱怨已定义的价值。

虽然我认为这与您的问题无关，但一旦定义了正确的404页面，可能会停止显示此错误。

未捕获的SyntaxError：Identifier＆＃39; baseUrl＆＃39;已经宣布

2 个答案: