5

Web ページを読み込もうとすると、次のエラーが表示されます: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

この問題に対応する他の回答を見てきましたが、CORS サポートの欠如を示しています。紛らわしいのは、cors をサポートしていることです。少なくとも私はすると思う。

Zingchart を Angular JS フロント エンドに接続し、AJAX リクエストを使用して REST API (localhost:3000) からデータを取得しようとしています。

これが私のAJAX呼び出しです：

window.feed = function(callback) {
    $.ajax({
        type: "GET",
        dataType: "json",
        headers: {
            Accept: "application/json",
            "Access-Control-Allow-Origin": "*"
        },
        url: "http://localhost:3000/readings",
        success: function (data) {
            var mem = data.mem.size/10000;
            var tick = {
                plot0: parseInt(mem)
            };
            callback(JSON.stringify(tick));
        }
    });

私の REST API 実装には以下が含まれます。

 // CORS Support
 app.use(function(req, res, next) {
   res.header('Access-Control-Allow-Origin', '*');
   res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
   res.header('Access-Control-Allow-Headers', 'Content-Type');
   next();
 });

私の REST API は、このチュートリアルの助けを借りて構築されました: https://www.youtube.com/watch?v=OhPFgqHz68o

4

1 に答える 1

6

"headers"とを取り出し"dataType"ます。リクエストは次のようになります。

$.ajax({
    type: "GET",
    url: "http://localhost:3000/readings",
    success: function (data) {
        var mem = data.mem.size/10000;
        var tick = {
            plot0: parseInt(mem)
        };
        callback(JSON.stringify(tick));
    }
});

ヘッダーがプリフライト リクエストをトリガーしています。

Angular を使用している場合は、AJAX に jQuery を使用せず、代わりに Angular の組み込み $http サービスを使用することを強くお勧めします。

私は ZingChart チームに所属しています。私たちがあなたのチャートを手伝うことができれば、叫び声を上げてください。

于 2016-01-18T19:59:00.643 に答える