Uncaught SyntaxError: Identifier 'baseUrl' has already been declared

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 服务器 returns 一个 HTTP 200 响应。不幸的是，我不知道如何解决这个问题。

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

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

不幸的是，类型属性只能用于 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

根据documentation，您不需要处理；只需创建一个 404.html:

You can specify a custom 404/Not Found error to be served when a user tries to access a page that does not exist. Simply add a 404.html page to the your project's public directory and the contents of this page will be displayed when Firebase Hosting needs to display a 404 Not Found error to the user.

为避免 baseUrl 错误，如果您可以访问这行代码：

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

尝试将其更改为：

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

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

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

Answer 2

firebase 或 polymer 都不会处理您的 404 页面的原因是，当您请求一个不存在的页面时，它不仅会 return 状态代码 200 但它也会 return 与 index 页面的 HTML 一起，所以它会显示一些东西，尽管那东西真的没什么。

现在 polymer 的设置方式是在 src 文件夹中查找视图，因此您只想在根目录而不是 src 文件夹中进行重写。所以把你的 firebase.json 改成

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

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

https://testforsoissue.firebaseapp.com/view2

将工作并将带您到 view2 因为初始请求将被重写为 return index.html 但 /src/my-view2.html 的请求不会

而未定义的路由

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

将抛出 404（在聚合物中），因为初始请求将再次重写为 return 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"
        }]
    }
}

Uncaught SyntaxError: Identifier 'baseUrl' has already been declared

Uncaught SyntaxError: Identifier 'baseUrl' has already been declared

javascript

firebase

polymer

firebase-hosting