部署IIS后AngularJS无法调用JsonResult的URL格式问题

这个问题我之前做.NET Core + AngularJS项目时也踩过坑，核心就是前端相对路径没有适配IIS虚拟目录的前缀，导致请求地址少了/ApplicationName部分。给你几个实用的解决办法：

1. 利用ASP.NET Razor生成根路径（最推荐） #

因为你的后端是.NET Core，完全可以在服务器端把应用根路径注入到前端，这样不管本地还是部署环境都能自动适配：

首先在你的布局页（比如_Layout.cshtml）里添加一段全局变量：

<script>
    // 让前端拿到服务器解析后的根路径
    window.appBaseUrl = '@Url.Content("~/")';
</script>

然后在AngularJS的请求代码里用这个变量拼接URL：

$http({ 
    url: window.appBaseUrl + 'Home/GetDetails', 
    method: "GET", 
    params: { StaffCode: $scope.StaffCode } 
}).then(function mySuccess(response) {
    // 处理成功逻辑
}, function myError(response) {
    $window.alert('An Error Occurred , Try Again Later');
});

原理：@Url.Content("~/")在.NET Core里会自动解析成当前应用的根路径——本地调试时是/，部署到ApplicationName虚拟目录下就会变成/ApplicationName/，完美适配两种环境。

2. 用AngularJS的$location服务构建路径 #

如果不想依赖后端Razor变量，也可以用AngularJS自带的$location服务获取当前站点的基础路径：

// 注入$location服务到你的控制器里
app.controller('YourController', ['$http', '$location', '$window', function($http, $location, $window) {
    // 构建应用根路径
    var protocol = $location.protocol();
    var host = $location.host();
    var port = $location.port() ? ':' + $location.port() : '';
    var appBaseUrl = `${protocol}://${host}${port}/ApplicationName/`;

    // 发起请求
    $http({ 
        url: appBaseUrl + 'Home/GetDetails', 
        method: "GET", 
        params: { StaffCode: $scope.StaffCode } 
    }).then(...);
}]);

注意：这个方法需要你硬编码虚拟目录名称ApplicationName，如果后期修改虚拟目录，记得同步改这里的代码，灵活性不如第一种。

为什么之前的~/和./没用？ #

• ~/是ASP.NET服务器端的路径符号，浏览器根本不认识它，前端代码直接用的话，浏览器会把它当成URL的一部分，自然找不到接口；
• ./是相对当前页面的路径，你的页面地址是/ApplicationName/Home/Index，所以./Home/GetDetails会被解析成/ApplicationName/Home/Home/GetDetails，这显然不是你要的接口地址。

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