javascript - 使用 JavaScript 访问 Azure 中运行的 Web 服务

Question

我有一个运行我的 Web UI 的 Azure ASP.Net Web Angular 色。我有一个 MvC4 REST API 在同一 Azure 实例中的单独 Web Angular 色中运行。 Azure 将 Web UI 放在端口 80 上，将 API 放在端口 8080 上。因此，当我想从网页向 REST API 发送 AJAX 请求时，我需要修改 URL 来更改端口以连接到 REST API Web UI Web Angular 色的。

我的页面中有这个 JavaScript:

    function getWebAPIURL(criteria) {
      //      The generated code had this:
      //        var uri = 'api/values';
      //  But that only works if the API is running in the same Azure web role as the UI,
      //  which it isn't - it's running in the same domain but on port 8080.  So we have
      //  to munge the URL a bit to get the correct URL for the RESTful API

      var strWebAPIURL =    window.location.protocol + '://' +
                            window.location.hostname + ':8080' +
                            '/api/values';

      // If provided,critiera is appended in REST style, e.g api/values/5
      if (criteria != undefined && criteria != null && criteria != '') {
          strWebAPIURL = strWebAPIURL + '/' + criteria;
      }
      // console.log(strWebAPIURL);
      return strWebAPIURL;
  }

  $(document).ready(function () {
      // Send an AJAX request
      $.getJSON(getWebAPIURL())
          .done(function (data) {
              // On success, 'data' contains a list of files.
              $('#File').text(formatReturnedItems(data));
          });
  });

当我停止在调试器中时，我看到从 getWebAPIURL 返回的 URL 是(我相信是正确的)

http://xxxx.cloudapp.net:8080/api/values

但是我从 getJSON 调用中返回了 404 错误。当我查看 Fiddler 时，我发现 URL 显然是

即它继续使用主域作为基础，并将我的 xxxx.cloudapp.net:8080 作为 URL 的子部分。我想这和防止跨域调用有关系。

但这似乎是一个非常常见的情况 - 我有一个 Web UI 和一个 REST API 层。看起来我并不想在这里做一些真正奇怪的事情，但应该很困难 - 所以我有一种感觉，我只是做了一些简单的错误。

其他人也这么做吗？

Answer 1

window.location.protocol 将返回带有尾随冒号 ( ref ) 的协议(protocol)。因此，无需将其包含在 JavaScript 中。

var strWebAPIURL = window.location.protocol + '//' +
                   window.location.hostname + ':8080' +
                   '/api/values';

上面的代码将创建一个有效的 URL，以便 jQuery $.getJSON() 函数不需要更改它。