尝试使用 Javascript 调用我的 MVC WebAPI答案

【问题标题】：Trying to use Javascript to call my MVC WebAPI尝试使用 Javascript 调用我的 MVC WebAPI
【发布时间】：2017-07-13 06:32:57
【问题描述】：

所以我有一个简单的 WebAPI 控制器...

[HttpGet]
public string Demo()
{
  System.Diagnostics.Debug.Print("API Demo call hit " + DateTime.Now.ToString());
  return "Got Here";
}

由于 Debug 输出，我可以看出它实际上是从我的 javascript 中调用的。所以我知道我的脚本至少是连接的。我也知道，如果我在行上打断.. 脚本（html 页面）会暂停并等到我让代码继续。所以他们在说话，但我有两个问题......

1) 每次我进行发送调用时，我都会收到脚本错误“NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'http://localhost:64769/api/demo'”......即使我知道它是和它说话。但我确实注意到，如果我不捕获错误，脚本会在“发送”行失败并且不会继续。

2) 但是，由于错误陷阱，脚本会继续（如预期的那样），但 XMLHttpRequest 没有我的返回。（例如 responseText 是空白的）.. 对象的几乎每个属性都是空白或 null。

所以我认为我的回复是空的，因为“发送”有问题。但是因为它实际上是在调用我的 Controller 并等待它运行，所以我不知道问题出在哪里？

这是我的脚本...

function CallWebAPI()
{
   var displayResults = document.getElementById('responseDetails');
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.open("GET", "http://localhost:64769/api/demo", false);

   try
   {
      xmlhttp.send();
   }
   catch(err)
   {
      displayResults.innerHTML += err + "<br />";
   }

   displayResults.innerHTML += "The Results...<br />";

   for (var key in xmlhttp)
   {
     displayResults.innerHTML += key + "---" + xmlhttp[key] + "<br />";
   }

}

【问题讨论】：

仅供参考。我只是使用 Fiddler 来观看我对 API 的调用。根据 Fiddler（我几乎不知道如何使用），我在 Inspector 中看到了调用，它在底部显示了我的返回值（顶部显示了客户端标题，底部显示了我接受的返回）。所以听起来越来越像我的服务在工作，但只是 JavaScript 端出了点问题？

标签： javascript asp.net-web-api xmlhttprequest

【解决方案1】：

全部，

所以在折腾了一天半之后，终于弄明白了。我想我是在桌面上运行一个 HTML 文件，而我的 Web 服务是在 http://localhost:64769 上运行的。

这是跨域的事情之一。在 .NET 中使用 HTTP 客户端时，我不必处理这个问题。但一旦我尝试使用 .NET 以外的客户端，我的 Web 服务实际上响应了……但客户端浏览器不接受响应。

解决方法是将我的 api 服务更改为...

[HttpGet]
public HttpResponseMessage Demo()
{
    string myReturnMessage = "API Demo call hit " + DateTime.Now.ToString();
    System.Diagnostics.Debug.Print(myReturnMessage);

    HttpResponseMessage myReturn = this.Request.CreateResponse(System.Net.HttpStatusCode.OK, myReturnMessage);

    //This was the KEY!!!!
    myReturn.Headers.Add("Access-Control-Allow-Origin", "*");

    return myReturn;
}

【讨论】：