6

次のヘッダーでCORSが有効になっている1つのドメインでホストされているAPIがあります。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Max-Age: 1728000

hackst.comからGETまたはPOSTリクエストを行うことができ、正常に機能します。リンク： http： //hackst.com/#w3SbV

別のドメインでホストされているバックボーンアプリから、GETリクエストは正常に機能します。しかし、新しいモデルを作成して保存しようとすると（つまり、POSTリクエストを作成しようとすると）、次のエラーで失敗します。

Failed to load resource: the server responded with a status of 501 (Not Implemented) http://projectwhatup.us:5000/api/posts
XMLHttpRequest cannot load http://projectwhatup.us:5000/api/posts. Origin http://ayush.projectwhatup.us is not allowed by Access-Control-Allow-Origin.

私の関連するバックボーンコード：

var newPostData = {
    topic : "New Post",
    body : "new body",          
    user_id : 1,
};  

var newPostModel = new Post(newPostData);
this.model.create(newPostModel);

createメソッドをオーバーライドして、次のように手動でPOSTリクエストを作成してみました。

create : function(data) {
    console.log('overriden create');

    $.ajax({
        "url" : this.url,
        "async" : true,
        "beforeSend" : function(obj){
            console.log(obj);
        },
        "contentType" : 'application/json',
        //"crossDomain" : true,  // uncommenting this doesnt help either
        "headers" : {

        },
        "dataType" : 'json',
        "type" : 'POST',
        "data" : JSON.stringify(data),
        "error" : function(err){
            console.log('new post creation failed');
            console.log(err);
        },
        "success" : function(resp){
            console.log('new post created');
            console.log(resp);
        }
    });
}

同じエラー。

JSFiddle（http://jsfiddle.net/X9cqh/5/）でもスタンドアロンのGETリクエストを試しましたが、バックボーンアプリでGETリクエストを正常に実行できても、失敗します。

私はこの時点で完全に無知です。ヒント、ポインタ、解決策はありますか？

4

3 に答える 3

6

サーバーは、次のヘッダーを使用してプリフライトに応答する必要もあります。

Access-Control-Allow-Headers: Content-Type

これが必要なのは、コンテンツタイプがapplication / jsonであり、CORS仕様（http://www.w3.org/TR/cors/）で定義されている許容値の範囲外であるためです。

于 2012-11-20T02:30:59.787 に答える
1

サーバーのセットアップは機能します。JSFiddleは明らかにajaxリクエストを行いませんが、ChromeコンソールまたはSafari開発者コンソールに次の4行を入力することで、それが機能することをすばやくテストできます。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://projectwhatup.us:5000/api/posts', false);
xhr.send();
xhr.responseText;

ここに画像の説明を入力してください

CORSを許可しないドメインでこれを試してみると、エラーが発生します。

于 2012-11-20T02:07:12.313 に答える
1

'Content-Type'ヘッダーを追加すると、CORSリクエストが失敗する理由は、サーバーが正しく設定されていないためです。

クライアントが特定のヘッダーを指定したり、通常とは異なるhttpメソッド動詞（PUTなど）を使用したりする場合、ブラウザーは最初に「プリフライト」OPTIONS呼び出しを実行して、それらのヘッダーの設定が許可されていることを確認します。サーバーは、適切なヘッダーを使用してこのOPTIONS呼び出しに応答する必要があります。これが問題の原因であることを確認したい場合は、Chromeデベロッパーツールの[ネットワーク]タブまたはFirebugでオプションが呼び出されることがわかります。

ここで私のより詳細な答えに興味があるかもしれません。

于 2012-12-20T12:07:38.377 に答える