4

他のドメインの他のプロジェクト (API) と通信するプロジェクト (フロントエンド) に取り組んでいます。

今のところ、私はこの構成でローカルで作業しています:

  • フロントエンド:http://127.0.0.1:9000
  • API :http://127.0.0.1:9100

私の API プログラムでは、HTTP ステータス コード 200 と共にこれらのヘッダーを返す OPTIONS リクエストを定義しました。

Access-Control-Allow-Headers:accept, origin, x-requested-with, content-type
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Max-Age:15
Content-Length:0

jQuery を使用して、この URL に Ajax リクエストを送信します。例として、OPTIONS クエリの Request ヘッダーを次に示します。

Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, origin, x-requested-with, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:127.0.0.1:9100
Origin:http://127.0.0.1:9000
Referer:http://127.0.0.1:9000/login
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.63 Safari/537.31

これは成功し (ステータス コード: 200 OK)、http://127.0.0.1:9100/auth/login期待どおりに POST が行われますが、[ネットワーク] パネルに次のように表示されます。

ステータス : キャンセル済み | タイプ : 保留中

コンソールを見ると、次のエラーが発生しました。

XMLHttpRequest を読み込めませんhttp://127.0.0.1:9100/auth/login。http://127.0.0.1:9000Access-Control-Allow-Origin でオリジンが許可されていません。

しかし、ご覧のとおり、Access-Control-Allow-Origin は "*" として定義されています。また、「127.0.0.1:9000」と「 」に変更しようとしhttp://127.0.0.1:9000ましたが、コンソールに同じエラーが表示されます。

ここで、私の jQuery ajax コマンドについて詳しく説明します。ajax 自体は非常に単純です。

jQuery.ajax({
    'url': '/auth/login',
    'type': 'POST',
    'data': {'login': 'abc', 'password': 'def'},
    'timeout': 15000
}).done(function (data, status, xhr) {
    console.log ('ok');
}).fail(function (xhr, status, description) {
    console.error('oups');
});

ただし、API のベース URL は、jQuery.ajaxPrefilter メソッドを介して後で追加されます。

jQuery.ajaxPrefilter (function (options) {
    var url = document.createElement('a');
    url.href = options.url;
    options.url = 'http://127.0.0.1:9000' + url.pathname;
});

これは、URL が変更されたときに複数のファイルが変更されるのを避けるために行われます。これが問題の原因かどうかはわかりませんが、これまでのところ、CORS 構成に関するすべてが問題ないように見えても、POST 要求を機能させることができません。

私は何を間違えましたか？

4

1 に答える 1

1

答えは実際には非常に簡単ですが、知っておく必要があります。

ヘッダーは、OPTIONS リクエストだけでなく、すべてのリクエスト (GET/POST/PUT/DELETE リクエストでも) で利用可能になります。

それが私にとってはうまくいかなかった理由です。

于 2013-04-24T12:16:39.390 に答える