GET / POST / PUT / DELETEの代わりにOPTIONSを送信するChromeのAJAX？

私は職場で内部Webアプリケーションに取り組んでいます。IE10ではリクエストは正常に機能しますが、Chromeでは、すべてのAJAXリクエスト（多数あります）は、指定したメソッドではなく、OPTIONSを使用して送信されます。技術的には、私の要求は「クロスドメイン」です。このサイトはlocalhost：6120で提供されており、AJAXリクエストを送信するサービスは57124にあります。このクローズされたjqueryバグは問題を定義していますが、実際の修正ではありません。

ajaxリクエストで適切なhttpメソッドを使用するにはどうすればよいですか？

編集：

これは、すべてのページのドキュメントロードにあります。

jQuery.support.cors = true;

そして、すべてのAJAXは同様に構築されています。

var url = 'http://localhost:57124/My/Rest/Call';
$.ajax({
    url: url,
    dataType: "json",
    data: json,
    async: true,
    cache: false,
    timeout: 30000,
    headers: { "x-li-format": "json", "X-UserName": userName },
    success: function (data) {
        // my success stuff
    },
    error: function (request, status, error) {
        // my error stuff
    },
    type: "POST"
});

ChromeはCORSヘッダーを探すリクエストをプリフライトしています。リクエストが受け入れ可能であれば、実際のリクエストを送信します。このクロスドメインを実行している場合は、それに対処するか、リクエストを非クロスドメインにする方法を見つける必要があります。これが、jQueryのバグが修正されずにクローズされた理由です。これは仕様によるものです。

単純な要求（前述）とは異なり、「プリフライト」要求は、実際の要求が安全に送信できるかどうかを判断するために、最初にOPTIONSメソッドによってHTTP要求を他のドメインのリソースに送信します。クロスサイトリクエストは、ユーザーデータに影響を与える可能性があるため、このようにプリフライトされます。特に、リクエストは次の場合にプリフライトされます。

• GET、HEAD、POST以外のメソッドを使用します。また、POSTを使用して、application / x-www-form-urlencoded、multipart / form-data、text / plain以外のContent-Typeでリクエストデータを送信する場合、たとえば、POSTリクエストがXMLペイロードをサーバーに送信する場合application / xmlまたはtext / xmlを使用すると、リクエストはプリフライトされます。
• リクエストにカスタムヘッダーを設定します（たとえば、リクエストはX-PINGOTHERなどのヘッダーを使用します）

リクエストという事実に基づいて がデフォルトのポート80/443で送信されないこのAjax呼び出しは自動的にクロスオリジンリソース（CORS）リクエストと見なされます。つまり、リクエストは、以下をチェックするOPTIONSリクエストを自動的に発行します。サーバー側/サーブレット側のCORSヘッダー。

これは設定しても発生します

crossOrigin: false;

または省略した場合でも。

その理由は単にそれだけですlocalhost != localhost:57124。localhostポートなしでのみに送信してみてください-要求されたターゲットに到達できないため失敗しますが、ドメイン名が等しい場合、POSTの前にOPTIONS要求なしで要求が送信されることに注意してください。

私はケビンBに同意します、バグレポートはそれをすべて言います。クロスドメインのajax呼び出しを実行しようとしているようです。同じオリジンポリシーに詳しくない場合は、https：//developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScriptから開始できます。

これがクロスドメインのajax呼び出しを意図していない場合は、ターゲットURLを相対化して、問題が解消するかどうかを確認してください。あなたが本当にJSONPを必死に見ているなら、注意してください、騒乱が潜んでいます。本当に私たちがあなたを助けるためにできることはこれ以上ありません。

可能であれば、通常のGET / POSTを介して別の名前でparamsを渡し、サーバー側のコードで処理できるようにします。

CORSをバイパスするために自分のプロキシで同様の問題があり、ChromeでPOST-> OPTIONの同じエラーが発生しました。それはAuthorization私の場合（"x-li-format"そして"X-UserName"ここではあなたの場合）のヘッダーでした。最終的にはダミーの形式（AuthorizatinJackGETなど）で渡してしまい、宛先への呼び出しを行うときにプロキシのコードを変更してヘッダーに変換しました。ここではPHPです：

if (isset($_GET['AuthorizationJack'])) {
    $request_headers[] = "Authorization: Basic ".$_GET['AuthorizationJack'];
}

私の場合、AWS（API Gateway）でホストされているAPIを呼び出しています。API自身のドメイン以外のドメインからAPIを呼び出そうとしたときにエラーが発生しました。私はAPIの所有者なので、Amazonのドキュメントで説明されているように、テスト環境でCORSを有効にしました。

本番環境では、リクエストとAPIが同じドメインにあるため、このエラーは発生しません。

お役に立てば幸いです。

答え @Darkファルコンによって、私は単にそれに対処します。

私の場合、node.jsサーバーを使用していて、セッションが存在しない場合は作成します。OPTIONSメソッドにはセッションの詳細が含まれていないため、POSTメソッドのリクエストごとに新しいセッションが作成されます。

そのため、create-session-if-not-existのアプリルーチンで、メソッドがOPTIONSであるかどうかを確認するチェックを追加しました。そうである場合は、セッション作成の部分をスキップします。

    app.use(function(req, res, next) {
        if (req.method !== "OPTIONS") {
            if (req.session && req.session.id) {
                 // Session exists
                 next();
            }else{
                 // Create session
                 next();
          }
        } else {
           // If request method is OPTIONS, just skip this part and move to the next method.
           next(); 
        }
    }

「プリフライト」リクエストは、実際のリクエストが安全に送信できるかどうかを判断するために、最初にOPTIONSメソッドによるHTTPリクエストを他のドメインのリソースに送信します。クロスサイトリクエスト

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

axiosの使用を検討してください

axios.get( url,
{ headers: {"Content-Type": "application/json"} } ).then( res => {

  if(res.data.error) {

  } else { 
    doAnything( res.data )
  }

}).catch(function (error) {
   doAnythingError(error)
});

私はフェッチとaxios を使用してこの問題を完全に解決しました。

非常によく似た問題が発生しました。Firefoxですべてが正しく機能し、Chromeで失敗する理由を理解するために、ほぼ半日かかりました。私の場合は、リクエストヘッダーのフィールドが重複している（またはタイプが間違っている）ためです。

XHRの代わりにフェッチを使用すると、クロスドメインであってもリクエストはプリライトされません。

 $.ajax({
            url: '###',
            contentType: 'text/plain; charset=utf-8',
            async: false,
            xhrFields: {
                withCredentials: true,
                crossDomain: true,
                Authorization: "Bearer ...."
            },

            method: 'POST',

            data: JSON.stringify( request ),
            success: function (data) {
                console.log(data);
            }
        });

contentType： 'text / plain; charset = utf-8 '、または単にcontentType：' text / plain 'が機能します！よろしく!!