AngularからWeb APIへのオブジェクトのリストの受け渡し

Question

AngularからWeb APIへオブジェクトのリストを渡すにはどうすればいいですか？

application/jsonとしてコンテンツタイプを使用しようとしましたが、CORSプリフライトエラーが表示されます。サブネットクラス

$scope.save = function (jsondata) { 

    $http({ 
     method: "POST", 
     url: "http://localhost:60262/api/IPUpload/getDetails", 
     data: jsondata, 
     headers: { 
      'Content-Type': 'application/json' 
     } 
    }).then(function (data) { 
     alert('success'); 
     if (data.status) { 
      $scope.msg = "Data has been inserted ! "; 
     } 
     else { 
      $scope.msg = "Error : Something Wrong"; 
     } 
    }, function (error) { 
     alert('fail'); 
     $scope.msg = "Error : Something Wrong"; 
    }) 

} 

以下の通りである：

public class Subnets 
{ 
    public string ID { get; set; } 
    public string Subnet { get; set; } 
    public string IPAddress { get; set; } 
    public string ServerName { get; set; } 
    public string Mac { get; set; } 
    public string Vmware { get; set; } 
    public string Usage { get; set; } 
    public string Owner { get; set; } 
    public DateTime ExpiryDate { get; set; } 
    public string Email { get; set; } 
    public string SwitchIP { get; set; } 
    public string SwitchPort { get; set; } 
    public string PortVLAN { get; set; } 
    public string Zone { get; set; } 
    public string Justification { get; set; } 
    public string CustomerID { get; set; } 
    public string Remarks { get; set; } 
} 

私はのContentを使用してみました

[HttpPost] 
    public bool getDetails(List<Subnets> data) 
    { 
     //Logic here 
    } 

後は角度コードである：以下の

は

ウェブAPIポストメソッドであります'application/x-www-form-urlencoded;と入力してください。 charset = UTF-8 '。これはAPIアクションメソッドを呼び出しますが、パラメータ "data"は空です。 content-typeが 'application/json'の場合、CORSプリフライトエラーが表示されます。ブロックされた

クロスオリジン・リクエスト：同一生成元ポリシーが http://localhost:60262/api/StaticIPUpload/getDetailsで リモートリソースを読ん禁止します。 （理由：CORS ヘッダー 'Access-Control-Allow-Origin'が '（null）'と一致しません）。

ありがとうございます。

ソリューション：私はGlobal.asaxの中で次のコードを追加し、それが働いた

：

protected void Application_BeginRequest() 
    { 
     if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS") 
     { 
      Response.Flush(); 
     } 
    } 

Answer 1

、Angular.jsは、プリフライトリクエストをトリガします。あなたのWeb APIは200回の応答でプリフライト要求に応答する必要があります。

独自のAPIを作成する場合は、http://localhost:60262/api/IPUpload/getDetailsエンドポイントのWeb APIでOPTIONが有効になっていることを確認してください。

OPTION HTTPメソッドを有効にして、200 Angularを返すと、期待どおりに動作するはずです。

Answer 2

CORSがアプリケーション/ JSONを許可していません。あなたはテキスト/プレーンで大丈夫でした

今のところヘッダー部分を避けることさえできます。あなたが言ったように、それはAPIアクションメソッドを呼び出しますが、データは空です。おそらくjsondataは有効なオブジェクトではありません。

次のコードを試してください。

$http({ 
     method: "POST", 
     url: "http://localhost:60262/api/IPUpload/getDetails", 
     data: JSON.stringify(jsondata)   
    }).then(function (data) { 

public bool getDetails(List<Subnets> data) 
{ 
} 

[HttpPost]なし。

私はまた、あなたのサブネットクラスを見てみたいと、私の記憶が正しければ、あなたがapplication/jsonを使用する場合jsondata

Answer 3

ウェブAPIフロントでCORSを有効にする必要があります。デフォルトでは、anglejsはクロスドメインajax呼び出しをサポートしています。しかし、サーバがクロスドメインコールを許可しない場合、それは失敗します。

あなたは次のようにCORSを有効にすることができます。

1. サーバー側で呼び出すオプションを有効にします。
2. ブラウザでCORSをチェックしてオプションコールを送信すると、200を返すように、実際のポストエンドポイントごとにオプションエンドポイントも必要です。
3. また、クロスドメインajaxコールではapplication \ jsonがサポートされています。