Question

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

我的页面中有这个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显然是

Fiddler Output

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

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

别人这样做了吗？

Answer 1

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

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

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

使用JavaScript命中Azure中运行的Web服务

1 个答案: