1

5 つの異なるプロジェクトを持つ空の asp.net ソリューションがあります。それらの 1 つは asp.net Web API で、もう 1 つは多数の html ページを含む空白の Web サイトです。backbone.js/jQuery を使用して、ソリューション内で Web API を呼び出しています。空の Web サイトが別のポートで実行されており、Web API が別のポートで実行されています。

//Collection
var AuditsCollection = Backbone.Collection.extend({

    url: 'http://localhost:56501/api/searchaudits',

    sync: function (method, model, options) {
                if (!options.crossDomain) {
                    options.crossDomain = true;
                }

                options.timeout = 1000;
                alert(method + ": " + JSON.stringify(model));
                return Backbone.sync(method, model, options);
            },
});
var audits = new AuditsCollection();

// Model
var Audit = Backbone.Model.extend({ });
var audit = new Audit({ auditNumber: "A12" });

audits.add(audit);

// POST CALL - このモデルを送信し、応答として別の JSON オブジェクトが返されることを期待しています。

 audit.save({}, {

    success: function (response) {
        alert("Got audits successfully" + response);
    },
    error: function (response) {

        alert("Error.. Go home now");
    }
});

私はまだこのエラーが発生します

XMLHttpRequest を読み込めませんhttp://mydomain:56501/api/searchaudits。要求ヘッダー フィールド Content-Type は、Access-Control-Allow-Headers では許可されていません。

4

1 に答える 1

1

私は問題が何であるかを理解したと思います。プロジェクトは、次の構造でセットアップされます。

エラー：

- 解決

-- Project 1 (Web API) - running on `http://localhost:80/api`

-- Project 2

-- Project 3

-- Project 4 (Views) - running on `http://localhost:3000/`

だから私がajaxリクエストを作り始めたとき、それは次のような例外を与え始めました

XMLHttpRequest を読み込めませんhttp://localhost:80/api/searchaudits。要求ヘッダー フィールド Content-Type は、Access-Control-Allow-Headers では許可されていません。

OPTIONS localhost:80/api/searchaudits405 (メソッドは許可されていません)

XMLHttpRequest は /api/searchaudits を読み込めません

異なるポートと異なるドメインを持つドメインを考慮することになるとは知りませんでした。

解決：

Backbone.Sync メソッドをオーバーライドする -リファレンス

Web Api プロジェクトの web.config ファイルに、次を追加します。

<system.webServer>
    <httpProtocol>
          <customHeaders>
            <add name="Access-Control-Allow-Origin" value="*" />
            <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept"/>
          </customHeaders>
        </httpProtocol>
</system.webServer>

この問題に関する回答は StackOverflow に少しずつありますが、これは完全なソリューションを 1 か所にまとめる努力です。

于 2013-05-22T11:16:01.347 に答える