Question

假设我的页面网址是：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>标签是角度应用程序初始化所必需的，因此删除<base>标签可能不起作用。

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

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

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

我们非常感谢您的帮助。

Answer 1

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

可以使用重定向规则强制执行更复杂，不一致的策略。该职责属于Web服务器。仅举几例，NginX，Apache和IIS都可以设置重定向规则。在那里，您可以使用正则表达式执行任意操作。

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

Answer 2

<base href="" />定义所有相对路径的基础。它遵循了Highlander原则（“只有一个人”）：-）

只需检查一下我是否了解您的瞄准目标。您写道：

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

因此，您不想拥有一个基本路径，但是您希望浏览器检查是否有多个所需的文档？

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

就像@Attersson所说，如果要实现这一点，则必须在Web服务器中创建过滤器和路由。对于客户而言，那是没有工作的。

现在介绍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/">

热烈的问候

Answer 3

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

如果您以http://proxyserver.com的身份统治，则基本网址将为/，但如果以像这样http://proxyserver.com/appname/，因此基本网址将类似于 / appname / ，您通常会在部署过程中使用像这样的角度cli设置基本网址

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}

html <base />标签的空href是什么意思？

3 个答案: