将 Web API 后端和 angular 前端作为一个解决方案中的两个项目进行调试

Question

我在 Visual Studio 2013 年有一个解决方案，其中包含 MVC Web API 和 Angular 应用程序。我已经设置了多个启动项目，因此两个项目在调试时同时启动。两者都启动正常，但它们在不同的端口上运行因此前端无法从后端调用 api。

前端有这样的请求：

$http.get("api/MenuItems").then(function(response) {
    //do something here
});

后端有这样的控制器：

[RoutePrefix("api/MenuItems")]
public class MenuController : ApiController
{
    public IHttpActionResult Get()
    {
        return Ok(MenuItem.GetItems());
    }
}

我该如何调试它？我想在 Web 的控制器中设置断点 API 并在前端启动请求时看到调试器停止，但这从未发生过……我错过了什么吗？

这是受教程 AngularJS Token Authentication using ASP.NET Web API 2, Owin, and Identity

启发

tutoprial 的源代码是 tjoudeh/AngularJSAuthentication

Answer 1

因为它们运行在不同的端口上，所以您必须指定完整的 url。一个完整的 url 去 http(s)://host:port/address

因此，如果您的后端服务器在端口 80 上，您应该 api 调用 http://localhost:80/api/menuItems

当 url 是相对的时，它将转到同一主机，因此如果您的前端在端口 40 上，/api/menuItems 指的是 http://localhost:40/api/menuItems

那么如果你正在调试 web api 并且你在控制器函数 Get() 的开头放置了一个断点你应该能够调试请求

Answer 2

有一篇文章与此类似。 https://weblog.west-wind.com/posts/2011/Dec/15/Debugging-ApplicationStart-and-Module-Initialization-with-IIS-and-Visual-Studio

基本上如果你想同时调试AngularJS和MVC服务器端代码（Visual Studio中的F5），你需要在IIS中配置网站。所以服务器端和客户端可以调用同一个域（而不是端口）。

将 Web API 后端和 angular 前端作为一个解决方案中的两个项目进行调试

Debugging web API back-end and angular front-end as two projects in one solution

routes

visual-studio

asp.net-mvc-4

asp.net-web-api

angularjs