エクスプレスファイルからデータを取得するためのAjax呼び出しを妨げるクロスドメインの問題

Question

私のノード/ exprssファイル（app.js）からデータを取り出して表示し、index.htmlに表示する必要があります。私はfrontend.jsファイルのlocalhost：3000/turtlesにajaxリクエストを行いますが、これはクロスドメインの問題を抱えています。

APP.JSファイル

var express = require('express'); 
var app = express(); 

app.get('/turtles', function(req, res){ 

    var turtles = { 
     message: "success", 
     data: [ 
     { 
      name: "Raphael", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Leonardo", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Donatello", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Michelangelo", 
      favFood: "Pizza" 
     } 
     ] 
    }; 

    res.send(turtles.data[0].name); 
}); 

app.listen(10000, function(){ 
    console.log("Port is on 10000!"); 
}); 

FRONTEND.JS

$(document).ready(function(){ 

    var names = []; 
    var turtles = []; 

    var myQueryUrl = "http://localhost:10000/turtles"; 

    $.ajax({url: myQueryUrl, method: 'GET'}).done(function(response){ 

      names = response.data; 
      turtles.push(response.data); 

      console.log(names) 
      console.log(turtles) 

      $('.DTurtles').append($('<p>' + name + '</p>')); 


    }); 

}); 

私は（ 'index.htmlを'）のsendfileを使用してみましたが、私はそれは私が探していますものではないと思います。これを行うと、ホームページ（localhost：3000 /）にHTMLが読み込まれますが、動的にデータを取得してhtmlに表示する必要があります。

AlainIb、turtle.data.nameだけでなく、turtle.dataオブジェクト全体を返すようにしてください。彼はまた、私は良いパスファイルを作成するように提案しました

router.get('/', function (req, res, next) { 
    res.sendFile(path.join(__dirname, '../', '../', 'client', 'index.html')); 
}); 

私はすべて同じファイルを持っています。誰かが上記の構文が何を説明することができます。なぜそれがrouter.getとapp.getないと特に

res.sendFile(path.join(__dirname, '../', '../', 'client', 'index.html')); 

この部分を説明している私も、私は、次の

app.all('/', function(req, res, next) { 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
    next(); 
}); 

app.get('/', function(req, res, next) { 
    // Handle the get for this route 
}); 

app.post('/', function(req, res, next) { 
// Handle the post for this route 
}); 

ような何かを行うことでCORSを許可する必要があることを読んで、私は何見当がつかないこれがすべてです。 app.all関数の次のパラメータはどこから来ていますか？res.headerは何ですか？これらのソリューションのいずれかが私のクロスドメインの問題を解決しますか？

UPDATE：私はAJAX呼び出しを要求していないのですデータを返すために仮定された私のGETハンドラ関数に次のコードを追加しました：私は、もはやクロスドメインの問題については、エラーメッセージが表示されます

app.get('/turtles', function(req, res, next){ 
    res.header("Access-Control-Allow-Origin", "*"); 
    res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
    var turtles = { 
     message: "success", 
     data: [ 
     { 
      name: "Raphael", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Leonardo", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Donatello", 
      favFood: "Pizza" 
     }, 
     { 
      name: "Michelangelo", 
      favFood: "Pizza" 
     } 
     ] 
    }; 

    res.send(turtles.data); 
}); 

を。しかし、私のfrontend.jsでは、console.logのカメと名前が表示されていますが、これは定義されていないと表示されています。データを取得するにはどうすればよいですか？

Answer 1

あなたが唯一のフロントエンドでresponse.data`が返す `アクセスし、配列` res.send（turtles.data） `であるturtles.dataを送っているres.send(...)からres.json(...)