リクエストヘッダーフィールドAccess-Control-Allow-OriginはプリフライトレスポンスでAccess-Control-Allow-Headersで許可されていません

Question

私のWebページをロードしようとすると次のエラーが発生します。 -Originは、プリフライト応答でAccess-Control-Allow-Headersによって許可されません。

私はこの問題に対応する他の回答を見ており、CORSサポートの欠如を示しています。混乱しているのは、私はcorsのサポートを持っているということです！少なくとも私はすると思う。

私は私の角度JSフロントエンドにZingchartを接続しようとすると、（ローカルホストで：3000）私のREST APIからデータを取得するために、AJAX要求を使用しています。ここ

は私の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

Answer 1

"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)); 
    } 
}); 

あなたのヘッダーには、プリフライトリクエストをトリガしています。

あなたが角度を使用している場合、私は非常にはAJAXのためのjQueryを使用していない示唆し、代わりに角のbuilt-in $http serviceを使用すると思います。

私はZingChartチームに所属しています。私たちがあなたのチャートを手伝ってくれたらホラー。