JSファイルの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 name; 

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

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

      name = response.data[0].name; 

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

    }); 

}); 

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

私はSENDFILE（ 'index.htmlを'）を使用すると、私はページのlocalhostをロードすると、私は次のエラーを取得：3000

TypeError: path must be absolute or specify root to res.sendFile 
    at ServerResponse.sendFile (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\response.js:404:11) 
    at C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\server.js:29:8 
    at Layer.handle [as handle_request] (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\router\layer.js:95:5) 
    at next (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\router\route.js:131:13) 
    at Route.dispatch (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\router\route.js:112:3) 
    at Layer.handle [as handle_request] (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\router\layer.js:95:5) 
    at C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\router\index.js:277:22 
    at Function.process_params (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\router\index.js:330:12) 
    at next (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\router\index.js:271:10) 
    at expressInit (C:\Users\hen\Desktop\Camp\assignments\optionalNodeAssignment\node_modules\express\lib\middleware\init.js:33:5) 

を私はres.send（turtles.data.nameをしようとすると）、と私はAJAX要求を行うと、私はエラーを取得する名を表示しようとする私のhtmlページ上のボタンをクリックしてください：

XMLHttpRequest cannot load http://localhost:10000/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. 

AlainIb、私はちょうど全体のカメのオブジェクトだけでなくturtle.nameを返す示唆しました。彼はまた、私は同じディレクトリ内のすべての私のファイルを持っているので、

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は何ですか？これらのソリューションのいずれかが私のクロスドメインの問題を解決しますか？

Answer 1

は、あなたがこのようなフォルダを持っている場合例えば

app.get('/', function (req, res, next) { 
    // path.join use the good separator accroding to your OS (\ or /) 
    res.sendFile(path.join(__dirname, '../', '../', 'client', 'index.html')); 
}); 

を提出するために良いパスを作成するには、この構文を使用する必要があります。

• /server/api/SERVERFS.JSを
• /クライアント/ index.html

---

ノード側

// return all the data array (remove ".name") 
app.get('/', function (req, res) { 
     res.send(turtles.data); 
}); 

角側

function displayTurtles(){ 

    var emptyArray = []; 

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

    $.ajax({url: myQueryUrl, method: 'GET'}).done(function(response){ 
     // if you want all the data no need to iterate over it, just reference it 
     emptyArray = response.data;  
     console.log("response:"); 
     console.log(emptyArray); 
    }); 
    // this log will be empty because it will be loged before thath the server return the array data, don't forget ajax in asyncrhonus 
    console.log("useless log":emptyArray); 
    // if you need do to other thing with emptyArray call a function her 
    doStuff(emptyArray); 
} 

あなたのコンソールを持っている必要があります。 はconsole.log（ "役に立たないログ"：...を）。 次に コンソール。log（ "response："）; ajaxリターンに時間がかかり、呼び出し後の行が即時に実行されるため、応答を待つことはありません