问题标签 [base-path]

我有一个使用 Express、Mongoose、React 和 Node 构建的应用程序。我的应用程序托管在如下所示的位置：https://example.com/app_name这意味着这app_name是所有静态资产的基本路径。

我正在使用 Webpack 并设置publicPath为https://example.com/app_name. 我可以很好地访问我的静态资产，但是当我尝试调用我的后端时，我的请求被路由到https://example.com/api/...而不是https://example.com/app_name/api/....

有没有办法为我的端点调用添加前缀，以便它们使用https://example.com/app_name/api/...而不是https://example.com/api/...通过 webpack 或任何其他方式？

我刚刚开始将我的一些应用程序从 Zend#1 迁移到 Zend#3。一切正常，但关于这些观点，我在理解基本概念时遇到了一些麻烦。

正如教程所建议的那样，我的项目布局是这样的：

我想知道为什么你需要在视图目录中复制“应用程序”文件夹 - 你已经在模块的目录中。有没有办法更改默认模板解析器的搜索路径，以便省略模块名称？仅仅依靠 viewManager 的“template_path_stack”是行不通的。我真的需要在这里编写自定义解析器吗？

非常感谢！

PS。不，我不想在这里使用自定义模板地图 ;-) 如果可能的话，我想了解并使用没有模板地图的默认左轮手枪。

我们正在开发一个使用 webpack 构建的 Vue.js 应用程序。要求是我们的应用程序不仅可以通过基本路径访问，/还可以通过自定义路径访问，以便可以在其他服务旁边访问应用程序。使用 webpacks \__webpack_public_path__，我能够针对指定的基本路径即时设置基本路径，例如如果当前路径已进入/foo/其中，则基本路径应从.../foo/.

在浏览应用程序时，一切看起来都很好，只要我在基本路径打开应用程序。问题是，在我导航到任何子路径并重新加载页面后，找不到任何文件。服务器将首先提供index.html我需要使用相对路径，因为必须动态确定基本路径。但是，如果打开基本路径以外的任何其他路径，则 index.html 中的相对路径将不会指向正确的 bundle.js 并且\__webpack_public_path__不会设置...

目前，我们的 webpack 配置中有两个入口点。第一个是一个JS文件，我们\__webpack_public_path__将根据当前访问的URL相对设置全局变量。因此，假设基本路径应该开始于/foo/并且访问的 URL 是https://www.host.com/some/path/foo/sub/sub1. 因此，相对基本的路径将是/some/path/foo/，资产将在 ie 中找到/some/path/foo/assets。webpack 配置中使用的所有其他路径，例如在文件加载器或任何其他插件中，都是相对的。

有没有人遇到过类似的问题？是否有可能，index.html可以在之后定义相对路径，或者在构建时由 webpack 定义？

目前我有以下html-index-file：

我必须通过 javascript 设置 base-url（它取决于 url）我不能将它硬编码到 index.html 中。

这很好用！

但是，如果我查看网络选项卡，我可以看到脚本“runtime.js”被触发了两次。

那么是否有可能中断第一次加载？

这是一个小提琴： https ://jsfiddle.net/tbaqovj5/

为了将 Angular 生成的“Angular-Typescript-Client-Generated”文件集成到我的 Angular 项目中，我必须提供 Api 的路径（http://localhost:8080）。Swagger 生成的 README 文件说：

设置服务基路径

如果与生成的基本路径不同，则在应用程序引导期间，您可以提供服务的基本路径。

或者

src/environments/*.ts首先通过添加相应的基本路径来扩展您的文件：

在 src/app/app.module.ts 中：

我尝试执行第二种方法“使用@angular/cli”，但不幸的是我不能使用

因为错误

发生。我真的不明白是谁在 ANGular 项目中提供了 BASE_PATH 。

您能否帮助我提供一些如何设置基本路径的想法或对提供基本路径的过程进行一些解释？

谢谢！

我在Startup.cs中为我的应用程序添加了 google 身份验证。

我也有一个重定向到外部提供商的页面。

在我的应用程序中，我需要指定Base Path。

问题是redirect_uri在重定向到外部提供商时不正确 - 组合路径中有一个额外的斜杠： http://localhost:4200/anystring//signin-google。

预期的 redirect_uri 是： http://localhost:4200/anystring/signin-google

当我尝试使用任何其他外部登录提供程序时，也会出现同样的问题。

但是当“/”用作基本路径时 - 一切正常，redirect_uri 中没有额外的斜杠。

我试图从返回 url 中修剪尾部斜杠：

但是这个解决方案没有帮助，而且看起来也不是一个好的解决方案。

我有一个用于客户端和服务器的 webpack 配置，服务器可以访问捆绑的代码，以便我可以调用react.renderToString(<App>)以生成服务器端渲染的内容（然后内容在客户端得到水合）。

服务器安装在子路径中，因此，要在本地使用它，您需要访问http://localhost:8080/some/path.

除了资产路径之外，一切都完美无缺！假设<App>创建一个图像，例如<img src="/static/logo.svg"/>（即在图像标签中App.tsx导入./logo.svg并使用它），因为服务器安装在子路径中，所以 logo.svg 的 HTML URL 应该以基本路径为前缀。所以真正的最终 src 应该是/some/path/static/logo.svg.

我可以通过__webpack_public_path__在其他导入之前设置来在客户端上完成这项工作，效果很好！但是我怎样才能在服务器上使用它呢？我只知道它在每个请求中的安装位置，并且__webpack_public_path__只能在导入期间设置（据我所知），所以感觉就像我的骨头。当然，如果我__webpack_public_path__在启动后更改，则不会使用新值。

有什么解决办法吗？我很高兴包含任何代码片段来阐明任何上下文。目前，请求通过请求标头到达服务器，我认为“仅”使用它来为资产添加前缀很容易。

作为参考，服务器是 Express 服务器，SVG 文件是通过标准文件加载器加载的。很高兴用其他信息或代码更新我的 Q。我已经为此苦苦思索了好几个小时，因此非常感谢任何帮助、见解、想法或猜测（我对 webpack 等人还很陌生）。

介绍

我知道这个问题已经以许多不同的形式提出。但是我已经阅读了我能找到的关于这个问题的每一篇文章和文章，并且无法用我们面临的先决条件解决我的问题。因此，我想先描述我们的问题并给出我们的动机，然后再描述我们已经尝试或正在使​​用的不同方法，即使它们并不令人满意。

问题/动机

我们的设置可以被描述为有些复杂。我们的 Angular 应用程序部署在多个 Kubernetes 集群上，并从不同的路径提供服务。

集群本身位于代理后面，Kubernetes 本身添加了一个名为 Ingress 的代理。因此，我们的常见设置可能如下所示：

当地的

http://localhost:4200/

本地集群

https://kubernetes.local/angular-app

发展

https://ourcompany.com/proxy-dev/kubernetes/angular-app

分期

https://ourcompany.com/proxy-staging/kubernetes/angular-app

顾客

https://kubernetes.customer.com/angular-app

始终为应用程序提供不同的基本路径。由于这是 Kubernetes，我们的应用程序是使用 Docker 容器部署的。

传统上，人们会使用ng build转译 Angular 应用程序，然后使用例如 Dockerfile，如下所示：

要告诉 CLI 如何设置 base-href 以及从哪里提供资产，将使用Angular CLI--base-href的--deploy-url选项。

不幸的是，这意味着我们需要为要在其中部署应用程序的每个环境构建一个 Docker 容器。

此外，我们必须注意在这个预构建过程中设置其他环境变量，例如在environments[.prod].ts每个部署环境中。

当前解决方案

我们当前的解决方案包括在部署期间构建应用程序。这通过使用不同的 Docker 容器来工作，该容器用作所谓的initContainer，它在 nginx 容器启动之前运行。

这个的 Dockerfile 如下所示：

将此容器作为 initContainer 合并到 Kubernetes 部署中，可以使用正确的 base-href、deployment-url 构建应用程序，并根据应用程序部署的环境替换特定变量。

除了它产生的一些问题外，这种方法非常有效：

1. 一次部署需要几分钟每次重新部署应用程序时都需要运行initContainer
   。当然，这总是运行命令。为了防止它在每次容器已经运行先前指令中的命令来缓存这些 ES 模块时构建 ES 模块。 尽管如此，用于差动加载的建筑物和 Terser 等正在再次运行，这需要几分钟才能完成。 当存在水平 pod 自动缩放时，额外的 pod 将永远可用。ng buildng buildRUN
   
   
2. 容器包含代码。这更像是一项政策，但我们公司不鼓励通过部署交付代码。至少不是以非混淆形式。

由于这两个问题，我们决定将逻辑从 Kubernetes/Docker 直接移到应用程序本身。

计划的解决方案

经过一番研究，我们偶然发现了APP_BASE_HREFInjectionToken。因此，我们尝试遵循网络上的不同指南，根据应用程序部署的环境动态设置它。首先具体做的是：

1. 在内容（和其他变量）中添加一个以基本路径命名的config.json文件/src/assets/config.json

2. 我们将代码添加到文件中，通过父历史递归main.ts探测当前以查找.window.location.pathnameconfig.json

3. 在里面app.module.ts被APP_BASE_HREF初始化为APP_CONFIG

重要提示：我们使用这种方法而不是使用 ，APP_INITIALIZER因为当我们尝试它时， 的提供者APP_BASE_HREF总是在 的提供者之前运行APP_INITIALIZER，因此APP_BASE_HREF总是未定义的。

不幸的是，这仅在本地有效，并且在应用代理时不起作用。我们在这里观察到的问题是，当应用程序最初由网络服务器提供服务时，没有指定 base-href 和 deploy-url，应用程序显然会尝试从“/”（root）加载所有内容。

但这也意味着它会尝试从那里获取 angular 脚本 aka和所有其他资产main.js，因此我们的代码实际上都没有运行。vendor.jsruntime.js

为了解决这个问题，我们稍微修改了代码。

我们没有让角度探测服务器，config.json而是将代码直接放在里面index.html并内联它。
像这样，我们可以找到基本路径并将 html 中的所有链接替换为前缀链接，以至少加载脚本和其他资产。这看起来如下：

此外，我们必须修改APP_BASE_HREF提供程序内部的代码，如下所示：

现在发生的事情是，它加载页面，用前缀替换源 url，加载脚本，加载应用程序并设置APP_BASE_HREF.

路由似乎有效，但所有其他逻辑（如加载语言文件、降价文件和其他资产）不再有效。

我认为该--base-href选项实际上设置了APP_BASE_HREF但--deploy-url我无法找到该选项。
大多数文章和帖子都指定指定 base-href 就足够了，并且资产也可以正常工作，但情况似乎并非如此。

问题

考虑到这一切，我的问题是如何设计一个 Angular 应用程序以绝对能够设置它的 base-href 和 deploy-url，以便所有 Angular 功能，如路由、翻译、import() 等都像我一样工作已经通过 Angular CLI 设置了这些？

我不确定我是否提供了足够的信息来完全理解我们的问题是什么以及我们期望什么，但如果没有，我会尽可能提供。

我在两个 AWS 区域（us-east-1、ca-central-1）中有 10 个不同的 API。使用基本路径映射，us-east-1.example.com 在美国为 5 个 API 提供服务，而 ca-central-1.example.com 为其他 5 个 API（API 网关）提供服务。尽管后端运行相同的代码，但它是客户要求的一部分。我们的客户是公立大学，他们希望在自己的国家拥有自己的服务器。例如，当前设置使用 API Gateway 中的自定义名称和基本路径。

美国大学：

加拿大大学：

有没有办法使用 Route 53 将它们组合成一个自定义域，如下所示？

我正在 localhost:3000 上开发一个 REACT 应用程序，并在 localhost:8080 上运行一个 Spring Data Rest 后端。我发现了如何禁用特定 RestRepositories 的 CORS 策略，例如：

现在可以访问以下 URL：localhost:8080/api/employees

但是，我正在尝试对基本路径 url 本身执行 GET 请求：localhost:8080/api。这仍然被 CORS 策略阻止。我想禁用该 URL 上的 CORS 策略。

我找到了以下文档：https://docs.spring.io/spring-data/rest/docs/current/reference/html/#customizing-sdr.configuring-cors这适用于存储库本身，但没有结果在基本 URL 上。

任何想法都非常感谢。