2016-04-18 9 views
0

私はasp.net webapiを作成し、それを紺碧でホストしました。 host/api/carparksを実行しても正常に動作します。また、私はODATAのクエリ文字列を実行したとき、私はそれらをしたいとJsonは紺碧を経て仕事をしませんが、現地で働いています

host/api/carparks?$Filter%20eq%20%27Liverpool%27

グーグルクロームをJSONとして結果を返す動作します。

Working JSON get example with Azure

私が午前の問題は、私は私のデータを視覚化する「クライアント」アプリケーションを作成する必要があります。テスト目的でデータを返すための非常に単純なforループを作成しました。データが返されると、アプリケーションの作成を開始できます。私はローカルに自分のWeb APIを実行しますが、私は私の紺碧の一つにgetJSONリクエストURIを変更する場合(ブラウザで動作します!)何も起こらないとき

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 

<script type="text/javascript"> 

    function getStations() { 

     var town = document.getElementById("town").value; 

     var stationList = "<p>"; 

     var uri = "http://localhost:38852/api/carparks?$filter=Town%20eq%20%27" + town + "%27"; 
     $.getJSON(uri, 
      function (data) { 
       $('#here_data').empty(); // Clear existing text. 
       // Loop through the list of products. 
       $.each(data, function (key, val) { 

        stationList += val.Name + '<br />'; 

       }); 
       stationList += "</p>"; 
       document.getElementById("here_data").innerHTML =  stationList; 
      }); 
    } 
    $(document).ready(getStations); 
</script> 
</head> 
<body onload="getStations()"> 
<h1>Stations API</h1> 
<p>Enter town</p> 
<input type="text" id="town" value="Derby" /> 
<input type="button" value="Find Stations" onclick="getStations()" /> 
<div id="here_data"> 
<p>Car parks go here</p> 
</div> 
</body> 
</html> 

私のクライアントアプリが完璧に動作します。私は紺碧に私のクライアントアプリケーションをアップロードし、それを

を変更する必要がある任意のAzureの設定があります:(そのように何ものテストを試してみました

Working 'Client side' locally.

+0

あなたは "何も起こらない" とはどういう意味ですか?あなたの機能は動作していますか?あなたのブラウザのネットワーキングツールでHTTPリクエストを見ることができますか?ブラウザのJavaScriptコンソールでエラーが表示されますか? '.fail'を[ドキュメントに記載されています](http://api.jquery.com/jquery.getjson/)に追加するとどうなりますか?あなたのAzureホストコードでポートを含めて正しいURLですか? – mason

+0

@masonご返信ありがとうございます。関数は実行されますが、データは返されません。私は何が起こるかを示す別のイメージを含めることを試みたが、私はスタックオーバーフローn00bであるので、それは私を許可しません。私はちょうど私のWeb API上に 'クライアントサイド'のHTMLページをアップロードして、それも私が望むように動作しています。しかし、別のWebアプリケーションからは動作しません。 –

+0

あなたは私の前のコメントで尋ねたことの多くに本当に答えなかった。それをもう一度お読みになり、すべてに対処してください。 – mason

答えて

1

は非常に多くのように見えます

ブラウザでサービスを直接呼び出すと問題は発生しませんが、別のドメイン(localhostと* .azurewebsites.net)からAjax呼び出しを発行した場合にのみ発生します。

異なるドメインからのAjax呼び出しでWeb APIサービスにアクセスするには、Cross Origin Resource Sharing(CORS)を有効にする必要があります。

詳細な記事がここに発見された:http://www.asp.net/web-api/overview/security/enabling-cross-origin-requests-in-web-api

はリンクより引用:

Install-Package Microsoft.AspNet.WebApi.Cors 

ファイルを開くApp_Start/WebApiConfig.cs。 WebApiConfig.Registerメソッドに次のコードを追加します。

public static class WebApiConfig 
{ 
    public static void Register(HttpConfiguration config) 
    { 
     // New code 
     config.EnableCors(); 

     config.Routes.MapHttpRoute(
      name: "DefaultApi", 
      routeTemplate: "api/{controller}/{id}", 
      defaults: new { id = RouteParameter.Optional } 
     ); 
    } 
} 

次に、TestControllerクラスに[EnableCors]属性を追加:

System.Net.Httpを使用して、 System.Web.Httpを使用します。 System.Web.Http.Cors;を使用します。

namespace WebService.Controllers 
{ 
    [EnableCors(origins: "http://mywebclient.azurewebsites.net", headers: "*", methods: "*")] 
    public class TestController : ApiController 
    { 
     // Controller methods not shown... 
    } 
} 

が起源パラメータについて、あなたは Webクライアントアプリケーションを配備URIを使用します。これにより、他のクロスドメイン要求をすべて許可しないで、 WebClientからのクロスオリジン要求が許可されます。 後で[EnableCors]のパラメータについて詳しく説明します。

発信元URLの末尾にスラッシュを含めないでください。

+0

あなたの回答をありがとう、私は私のPCの近くにいるときにこれを試して、あなたに知らせることを確認します。 –

+1

CORSオプションはAzure Portal経由で設定できます。CORSは設定ブレードにあります。 – viperguynaz

+0

@ viperguynazありがとう、私は紺碧のポータルでこのオプションを変更しました。残念ながら問題は解決していません。 –

1

@ viperguynazと@florianのおかげで、私は私の問題を修正しました。 AzureのポータルでCORSオプションを変更しました。 (私が最初にやったとき、私はURLの最後にスラッシュを削除しませんでした)。私はスラッシュを削除し、それは動作します。

また、CORSをもっと理解するために、@florianの情報を使用しました。

おかげで再び 1幸せなジョー:)

+0

私のアプリでクロスドメインを許可していたnode.JSアプリを配備していたので、この回答は本当に助かりましたが、十分ではありませんでした。私はAzure Portalを通過してそこに置かなければなりませんでした。それは二重の安全のようなものです。この種のチェックは、アプリケーションレベルで実行する必要があります。 – schankam

関連する問題