使用 IIS Express 在 Visual Studio 中运行 Angular 和 Web API答案

【问题标题】：Running Angular and Web API in Visual Studio with IIS Express使用 IIS Express 在 Visual Studio 中运行 Angular 和 Web API
【发布时间】：2014-07-03 15:54:24
【问题描述】：

我有一个带有 Web API 项目和 Web UI 项目（使用 Angular）的 Visual Studio 2013 解决方案。我正在使用 IIS Express。

有没有办法设置这些项目，以便 Angular 代码可以调用 Web API 项目，而无需在 localhost 和端口号中进行硬编码？

            return $http.get("http://localhost:1561/api/products")
                .then(function (response) {
                    return response.data;
                });

如果我硬编码 localhost:1561 而不仅仅是使用“/api/products”样式，我必须在部署到生产之前手动更改代码，并在开发期间将其更改回运行。

有没有更简单的方法？

谢谢！

【问题讨论】：

FYI ... Angular 代码是从 IIS Express 使用此 URL 执行的：localhost:41796 所以我认为不能使用客户端的位置来查找 Web API 服务器。我开始认为 IIS Express 不适合这项任务。

标签： asp.net visual-studio iis-express

【解决方案1】：

var rootPath;

if (location.hostname === 'localhost') {
    rootPath = 'http://localhost:1561';
} else {
    rootPath = 'http://' + location.hostname;
}

return $http.get(rootPath + '/api/products')
    .then(function (response) {
        return response.data;
    });

【讨论】：

我认为此解决方案不适用于在其系统上使用 IIS 的团队成员，因为它会尝试使用 my IIS Express 端口号？

【解决方案2】：

我实际上编写了一个返回绝对 URL 的简单实用程序方法，因此在您的代码中您只需键入相对 URL。下面是这个方法，你应该可以从你的 JS 调用它，传递相对 URL（即 /api/products）或将其转换为辅助扩展方法......

// Code
public static string ToAbsoluteUrl(string relativeUrl)
        {
            if (string.IsNullOrEmpty(relativeUrl))
                return relativeUrl;

            if (HttpContext.Current == null)
                return relativeUrl;

            if (relativeUrl.StartsWith("/"))
                relativeUrl = relativeUrl.Insert(0, "~");
            if (!relativeUrl.StartsWith("~/"))
                relativeUrl = relativeUrl.Insert(0, "~/");

            var url = HttpContext.Current.Request.Url;
            var port = url.Port != 80 ? (":" + url.Port) : String.Empty;

            return String.Format("{0}://{1}{2}{3}",
                url.Scheme, url.Host, port, VirtualPathUtility.ToAbsolute(relativeUrl));
        }

【讨论】：

感谢您的建议。这段代码去哪儿了？我的整个 UI 都是 Angular，所以我没有地方可以调用 C# 代码。

【解决方案3】：

据我了解，不可能做我想做的事。以下是选项：

1) 在本地机器上使用 IIS。这样您就可以根据需要设置路径/虚拟目录。这也使得在调试期间从其他浏览器调用 API 变得更加容易。注意：这确实要求您从现在开始以管理员模式运行 Visual Studio。

2) 将两个项目合二为一。对我来说，这不是一个有效的选项，因为我需要将 UI 代码与 API 代码完全分开。

希望这有助于其他尝试使用 Angular 和 Web API 的人。

【讨论】：