html <base> 标签的空 href 是啥意思？

Posted 2023-03-05

【中文标题】html <base> 标签的空 href 是啥意思？

【英文标题】：What does empty href for html <base> tag means?html <base> 标签的空 href 是什么意思？

【发布时间】：2018-12-27 05:50:28

【问题描述】：

假设我的页面 URL 是：http://example.com/path/to/dir/index.html

我通过以下方式代理此页面：http://proxyserver.com/path/to/dir/index.html。 同样，我希望页面中的所有相对 URL 都由 proxyserver.com 而不是 example.com 解析。正确的<base> href 值应该是多少？

我想要页面上的相对 URL，例如

newfile.html 解析为 http://proxyserver.com/path/to/dir/newfile.html /newfile.html 解析为 http://proxyserver.com/newfile.html #hash 解析为 http://proxyserver.com/path/to/dir/file.html#hash

在页面中设置<base href="" /> 可以正确完成这项工作，但它是否有一些含义？跨浏览器是否有不同的解释？空href 值实际上是什么意思？它适用于 Angular 等所有框架吗？

我听说 <base> 标记是 Angular 应用程序初始化所必需的，因此删除 <base> 标记可能不起作用。

注意：该网站可能已经包含一些 <base> 标签，我总是想覆盖这些标签。

我也尝试过<base href="/" />，但它会解析相对 URL

newfile.html 到 http://proxyserver.com/newfile.html 和 #hash 到 http://proxyserver.com/#hash 这是错误的。

非常感谢任何帮助。

【问题讨论】：

这是base的工作原理，我不明白

@MarcoSalerno 我找不到任何说明href 的空值对<base> 标记意味着什么的文档。是否与不设置或删除现有的<base> 标签相同？但是，<base> 是强制性的 Angular 应用程序将会中断。

空意味着根，就像每个 tchonology 一样

【参考方案1】：

基本 URL 或基本位置是唯一的根 URL，通过它可以将相对 URL 转换为网站的绝对 URL。多个基地是不可能的。

更复杂、不一致的策略可以通过重定向规则来实施。这项职责属于网络服务器。仅举几例，nginx、Apache 和 IIS 都具有设置重定向规则的能力。在那里你可以用正则表达式做任何你喜欢的事情。

由于此问题被标记为 Angular，因此，由于客户端仅在 Web 服务器解析 http 请求后才访问页面，因此您必须为每个错误情况创建一个重定向到正确页面的空白页面。这当然比让 Web 服务器处理重定向更糟糕。

【参考方案2】：

<base href="" /> 定义所有相对路径的基础。 它遵守汉兰达原则（“只能是一个”）:-)

只是为了检查我是否理解你的目标。你写道：

newfile.html 解析为 http://proxyserver.com/path/to/dir/newfile.html /newfile.html 解析为 http://proxyserver.com/newfile.html

所以您不想拥有一个 Basepath，但您希望浏览器检查多个路径（如果有您需要的文档）？

这并不容易（从浏览器的角度来看）。原因是浏览器不知道这些路径的内容。他必须向这些服务器创建请求“嘿，不错的服务器，您的目录中有“newfile.html”吗？没有？好的，谢谢。”

就像@Attersson 所说，如果你想实现这一点，你必须在你的网络服务器中创建过滤器和路由。这对客户来说不是工作。

现在关于 Angular。 在 Angular 6 中，您可以在 index.html 中写入 <base href="/">。 然后在Angular.json 中配置您真正想要的基本路径：

...
"architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
             ...
            "baseHref": "/myLovedPath/",
...

因此，Angular 将构建应用程序并将<base href="/"> 更改为<base href="/myLovedPath/">

热烈的问候

【讨论】：

如果在 Angular 中，我写 <base href=""> 即空 href 值怎么办？会坏吗？

@lazyvab 你必须在你的网络服务器中使用重定向。这并不意味着要在客户端（Angular）上处理。无论如何，空基地意味着当前主机。

【参考方案3】：

标签指定文档中所有相对 URL 的基本 URL/目标。 文档中最多可以有一个元素，并且必须在元素内。

如果你像 http://proxyserver.com 一样支配，则基本 url 将是 / ，但如果支配 像这样http://proxyserver.com/appname/ 所以基本 url 会像 /appname/ 并且你通常会在部署过程中使用像这样的角度 cli 设置基本 url

ng build --prod --bh=/appname/

在这种情况下，您必须使用**HashLocationStrategy** 路由

app.module.ts

@NgModule(
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule  
  ],
  providers: [
     provide: LocationStrategy, useClass: HashLocationStrategy  
  ]
)
export class AppRoutingModule  

提供：LocationStrategy，useClass：HashLocationStrategy