在 javascript 文件中获取正确的根目录

Question

在将 IIS 上的应用程序部署到我们的开发服务器之后，我在解析本地计算机之间的 URL 根目录时遇到问题。

本地运行时的url是这样的。 http://localhost:57173/

在开发服务器上运行时的 url 是这样的。 http://ServerName/AppName

我有对 Web api 的 JQuery Ajax 调用，如果尾部斜杠被省略，它将无法在开发服务器上找到位置。

电话来了

$.ajax({
    type: "GET",
        url: "api/MyApi/Get",
        data: { period: selectedPeriod },
        cache: false,
        success: function (data) {

        }
    });

如果我在开发服务器上的 api 调用中查看 FireBug，并保留尾部斜杠，它将显示

http://ServerName/api/MyApi/Get

如果我确实有斜杠，它会正确解决这个问题。 （注意现在包含 AppName。）

http://ServerName/AppName/api/MyApi/Get

我在这里缺少什么？当我将应用程序移动到此服务器时，它似乎没有找到正确的根目录。尾部斜杠在本地没有区别。无论哪种方式，它都会找到 api。任何想法如何解决这个问题？

Answer 1

没有前导斜杠的 url 被认为是相对 url。您的 url "api/MyApi/Get" 将由浏览器相对于包含脚本的页面的 url 解析。

http://ServerName/AppName 在浏览器看来就像是一个页面请求，其中 AppName 是页面的名称，解析 url 时不考虑 AppName。

http://ServerName/AppName/（斜杠）在浏览器中显示为目录请求，并成为您的相对 url 的基础。

最好的解决办法可能是将http://ServerName/AppName 的请求重定向到http://ServerName/AppName/

要在您的应用程序中进行重定向，请将以下内容插入您的 /Home/Index 控制器操作（在任何其他代码之前）

if (!Request.Url.AbsolutePath.EndsWith("/"))
{
    return Redirect("~/");
}

这会将http://ServerName/AppName 的任何请求重定向到http://ServerName/AppName/ 作为副作用，它还会将http://ServerName/AppName/Index 的任何请求重定向到http://ServerName/AppName/，但我认为这不会给您带来任何问题。

Answer 2

Javascript 通常不会运行，除非用户导致事件发生。我更喜欢使用以下内容，因为它允许 MVC 每次无论您在哪里部署都能正确获取准确的路由。

HTML

<button data-url="@Url.Action("MyApi", "Get")"></button>

Javascript

$(document).ready(function()
{
  $('button').on('click', function()
  {
    var url = $(this).data('url');
    $.ajax({
      type: "GET",
      url: url,
      data: { period: selectedPeriod },
      cache: false,
      success: function (data) {
    });
  });
});

我认为在 javascript 中对 url 进行硬编码是不好的做法。

Answer 3

我也遇到了这个问题，解决方法是声明一个 javascript 变量，其中包含在两个环境（开发和本地）中不同的 url 部分，并将其添加到每个 ajax 请求：

我将该变量放在布局文件 (Views/Shared/_Layout.cshtml) 中，以便它可以由 ASP.NET 自动填充，然后全局使用（确保在调用 @RenderSection 之前创建脚本）：

  ...
  <script>
    var baseUrl = @Html.Raw(Json.Encode(Url.Content("~")));
  </sctipt>
  @RenderSection("scripts", required: false) 
</body>
...

然后在 ajax 调用的 url 中添加该变量（例如 View/Home/Index.cshtml）：

    @section scripts {
      $.ajax({
        type: "GET",
        url: baseUrl + "api/MyApi/Get",
        data: { period: selectedPeriod },
        cache: false,
        success: function (data) {} 
     });
   }