在Orchard Core模块中如何通过JavaScript获取站点URL？

我来给你几个靠谱的实现思路，都是Orchard Core项目里常用的做法，能帮你安全地拼接端点路径，不用硬编码URL：

1. 最直接：在Razor视图中注入基础URL到全局JS变量 #

这是最简单的方式，适合大多数场景。在模块对应的Razor视图（比如你加载JS的页面视图）里，直接用Orchard的UrlHelper生成站点根路径，然后赋值给一个全局JS变量：

<!-- 在你的模块视图文件（比如.cshtml）中添加 -->
<script>
    // 拿到站点的根路径，自动处理多租户、子目录部署等场景
    const siteBaseUrl = '@Url.Content("~/")';
</script>

之后在你的模块JS文件里，就可以直接拼接端点路径了：

// 假设你的端点路径是 "/api/your-module/action"
const fullEndpointUrl = siteBaseUrl + 'api/your-module/action';

// 发送POST请求
fetch(fullEndpointUrl, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(yourData)
})
.then(response => response.json())
.catch(error => console.error('请求出错:', error));

2. 通过资源管理系统传递站点URL #

如果你的JS是通过Orchard Core的资源管理系统注册的（推荐的方式），可以在注册脚本时通过自定义属性传递站点URL：

步骤1：在模块的Startup.cs中注册脚本并添加属性 #

using OrchardCore.ResourceManagement;

public class Startup : StartupBase
{
    public override void ConfigureServices(IServiceCollection services)
    {
        services.Configure<ResourceManagementOptions>(options =>
        {
            options.Scripts.Add("YourModuleScript", builder =>
            {
                builder
                    // 指向你模块里的JS文件路径
                    .AddScript("~/Modules/YourModuleName/js/your-script.js")
                    // 添加自定义属性，传递站点根路径
                    .WithAttribute("data-site-base-url", "@Url.Content("~/")");
            });
        });
    }
}

步骤2：在JS文件中读取属性值 #

// 找到对应的脚本标签，读取自定义属性
const moduleScript = document.querySelector('script[data-site-base-url]');
const siteBaseUrl = moduleScript.getAttribute('data-site-base-url');

// 后续拼接请求URL的逻辑同上

3. 结合window.location处理非根路径部署 #

如果你的站点部署在子目录或者多租户环境下，window.location.origin只能拿到域名+端口，这时候可以结合视图注入的根路径来生成完整基础URL：

<script>
    const siteRootPath = '@Url.Content("~/")';
    // 生成完整的站点基础URL，包含协议、域名、端口和根路径
    const fullBaseUrl = window.location.origin + siteRootPath;
</script>

这样不管你的站点部署在什么环境下，都能拿到正确的基础URL，避免硬编码带来的部署问题。

注意事项 #

• 不要直接硬编码URL，因为部署环境（比如测试、生产）的域名或路径可能不同；
• Url.Content("~/")会自动处理Orchard Core的多租户路径，是最安全的获取根路径的方式；
• 如果你的端点是模块内的API，确保在路由配置时使用[Area("YourModuleName")]特性，这样路由会自动带上模块区域信息，配合基础URL就能正确访问。

内容的提问来源于stack exchange，提问作者GadgetGeekUK