AngularjsアプリケーションがPOSTメソッドでクロスドメインに失敗する

Question

Web設定で次のようにクロスドメインにアクセスできるASP.Net Web APIのポストメソッドを呼び出そうとしています。

<httpProtocol> 
    <customHeaders> 
    <add name="Access-Control-Allow-Origin" value="*" /> 
    <add name="Access-Control-Allow-Methods" value="GET,PUT,POST,DELETE,OPTIONS" /> 
    <add name="Access-Control-Allow-Headers" value="Content-Type" /> 
    </customHeaders> 
</httpProtocol> 

私の角度アプリは急行アプリです。次のようにpostメソッドを呼び出します。

method: "POST", 
    data: data, 
    url: "http://api.justbooksaloon.com/api/Customer/Login", 
    headers: { 
    'Accept': 'application/json', 
    'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8', 
    'Access-Control-Allow-Origin': '*', 
    'Access-Control-Allow-Methods': 'POST', 
    'Access-Control-Allow-Headers': 'Content-Type, Origin, X-Requested-With, Accept' 

ただし、次のエラーが発生します。

XMLHttpRequestはhttp://api.justbooksaloon.com/api/Customer/Loginをロードできません。要求ヘッダーフィールドAccess-Control-Allow-Originは、プリフライト応答でAccess-Control-Allow-Headersによって許可されません。 angular.js：14110 POST http://api.justbooksaloon.com/api/Customer/Loginヌル

Answer 1

Access-Control-*ヘッダは応答ヘッダです。

要求ヘッダーとして設定しようとしています。

標準的な要求ヘッダーではないため、受け入れ可能かどうかをサーバーに問い合わせるプリフライト要求をトリガーします。

サーバーは応答ヘッダーであり、要求ヘッダーとして意味をなさないので、「いいえ」と表示されます。

クライアント側のJavaScriptで設定しないでください。