2014-04-26 66 views
1

我有一個運行我的Web UI的Azure ASP.Net Web角色。我有一個MvC4 REST API在同一個Azure實例中的獨立Web角色中運行。 Azure將Web UI放在端口80上,並將API放在端口8080上。因此,當我想從網頁向REST API發送AJAX請求時,我需要將URL改爲更改端口以連接到REST API的Web UI Web角色。使用JavaScript打擊在Azure中運行的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返回的(正確的,我相信)

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

但我從getJSON調用中取回404錯誤。當我看到提琴手,我看到網址顯然要

Fiddler Output

即,他們會繼續使用主域名爲基礎,以我的xxxx.cloudapp.net:8080作爲子 - 部分網址。我相信這與防範跨域電話有關。

但是,這似乎是一個非常常見的情況 - 我有一個Web UI和一個REST API層。這似乎並不像我想要做的事情那麼奇怪,應該很難 - 所以我覺得我只是在做一些簡單的錯誤。

鋤頭別人做這個?

回答

1

window.location.protocol將返回帶有尾部冒號的協議(ref)。因此沒有必要將它包含在JavaScript中。

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

上面的代碼將創建一個有效的URL,這樣的jQuery $.getJSON()功能不覺得有必要去改變它。

+0

缺乏指甲......這是問題所在。我沒有仔細觀察,看到URL實際上有一個額外的「:」......解決了這個問題。謝謝! –

+0

;)你非常歡迎。 –