28

最新のベータ 2 リリースで、クロスドメイン POST リクエストを Api コントローラにヒットさせるのに苦労しています。

Chrome (およびその他のブラウザー) は次のように吐き出します。

OPTIONS http://api.hybridwebapp.com/api/values 400 (Bad Request)
POST http://api.hybridwebapp.com/api/values 404 (Not Found)

この問題に関連している可能性がありますが、その回避策と web.config の追加などの他のいくつかの修正をここに適用しました

私はしばらくこれで頭を悩ませてきたので、問題を正確に再現するための解決策を作成しました。

Web アプリをロードすると、GET 用と POST 用の 2 つのボタンがあり、ボタンの横に応答が表示されます。GET が機能します。POST を正常に返すことができません。

ここに画像の説明を入力

Fiddler から原因のヒントを得ることができますが、応答を見ると Access-Controll-Allow-Origin ヘッダーにドメインが含まれているため意味がありません。

ここに画像の説明を入力

ソリューションには「ConfigurationScreenshots」と呼ばれるフォルダーがあり、IIS 構成 (Web サイトのバインド) とプロジェクト プロパティの構成のスクリーンショットがいくつか含まれており、できるだけ簡単に私を助けることができます :)

編集: このエントリをホスト ファイル (%SystemRoot%\system32\drivers\etc) に追加することを忘れないでください。

 127.0.0.1     hybridwebapp.com  api.hybridwebapp.com

**ステータス:** Chrome などの一部のブラウザーでは、OPTIONS 応答のエラー メッセージに関係なく、POST を続行できるようです (Firefox などの他のブラウザーでは許可されません)。しかし、私はそれが解決したとは考えていません。

OPTIONS リクエストの Fidler スクリーンショットを見てください。

Access-Control-Allow-Origin: http://hybridwebapp.com

それでもエラー：

オリジンhttp://hybridwebapp.comは許可されていません

それはまるでヘッダーを無視しているかのように完全に矛盾しています。

4

5 に答える 5

24

わかりました、これを乗り越えました。これは私が今まで遭遇した中で最も奇妙な問題でなければなりません。それを「解決」する方法は次のとおりです。

  1. このドメインへのOPTIONS リクエストが (400 Bad Request ではなく) 200 OK を返し始め、POST がまったく発生しない (または、少なくともブラウザがそれを飲み込んだために発生しないように見える)まで、通常どおりの生活を続けます。
  2. Fiddler の OPTIONS 応答に不思議なことに「Access-Control-Allow-XXX」の重複が含まれていることに注意してください。
  3. 前の問題を修正しようとしたことを明確に覚えていて、うまくいかなかったとしても、web.config から次のステートメントを削除してみてください。

これを削除します：

    <httpProtocol>
       <customHeaders>
         <remove name="X-Powered-By" />
         <add name="Access-Control-Allow-Origin" value="http://mydomain.com" />
         <add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" />
         <add name="Access-Control-Allow-Methods" value="GET, PUT, POST, DELETE, OPTIONS" />
       </customHeaders>
    </httpProtocol>

あなたはすでにこれを持っているので：

 var enableCorsAttribute = new EnableCorsAttribute("http://mydomain.com",
                                                   "Origin, Content-Type, Accept",
                                                   "GET, PUT, POST, DELETE, OPTIONS");
        config.EnableCors(enableCorsAttribute);

教訓: 必要なのは 1 つだけです。

于 2013-07-23T01:22:58.253 に答える
12

OAuth Authorization を使用する場合。リクエストは Web API に直接送信されません。そのエンドポイントの OWIN CORS サポートを有効にする必要があります。

私のサイトでのやり方: owin cors をインストールする

Install-Package Microsoft.Owin.Cors

注: 使用しないでください:Install-Package Microsoft.AspNet.WebApi.Cors

ファイル Startup.Auth.cs 内

 //add this line
            app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

            // Enable the application to use bearer tokens to authenticate users
            app.UseOAuthBearerTokens(OAuthOptions);
于 2014-12-15T17:34:13.220 に答える
3

私は MVC コントローラー (ApiController ではありません) を持っていますが、私が思いついた解決策は他の人に役立つかもしれません。コントローラの POST アクション ( ) へのクロス ドメイン アクセスを許可するために、/data/xlsx2 つのアクションを実装しました。

  1. フライト前のチェックに
  2. ポストのために

HttpOptions アクションがない場合、プリフライト チェックで 404 が返されます。

コード：

[HttpOptions]
public ActionResult Xlsx()
{
    // Catches and authorises pre-flight requests for /data/xlsx from remote domains
    Response.AddHeader("Access-Control-Allow-Origin", "*");
    Response.AddHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    Response.AddHeader("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, OPTIONS");
    return null;
}

[HttpPost]
public ActionResult Xlsx(string data, string name)
{
    Xlsx(); // Add CORS headers

    /* ... implementation here ... */
}

IE 11、Chrome、FireFox でテストしました。

于 2015-06-01T13:10:44.117 に答える
2

これを ConfigureOAuth 内の startup.cs ファイルに追加します。

app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);

于 2016-02-05T10:14:03.750 に答える
0

応答ヘッダーに以下のコードを追加してみてください。

Response.AddHeader("Access-Control-Allow-Origin", "*");
于 2013-07-23T02:19:42.627 に答える