Witam wszystkich
Jestem prawie zielony z Javascriptu i ogolnie webowki, wiec prosze o wyrozumialosc.
Probuje uzyc biblioteki jtable (http://www.jtable.org/Demo/FunctionsAsActions) do wyswietlenia jsona z serwera i kod wydaje sie, ze dziala, ale na drodze najwyrazniej stanely mi zabezpieczenia i nie bardzo wiem jak to obejsc.
Na obecna chwile mam taka sytuacje.
- Plik frontendu uruchamiany jest z poziomu serwera uruchomionego przy uzyciu node.js -> "node ./node_modules/http-server/bin/http-server"
Niestety, ale jak wczesniej uruchamialem plik bezposrednio z dysku (file://), to w konsoli chromium wyskakiwal jakis komunikat o tym, ze strona i serwer musza byc w tej samej domenie, czyli w tym przypadku, jest to localhost. - Backend uruchamiany jest przy uzyciu node.js i modulu express.js.
- Frontend dziala na porcie 8080
- Backend dziala na porcie 3000
Jak wpisze we frontendzie (akcja "listAction") pelny link z domena, portem i urlem, to wyskakuje mi takie cos
Access to XMLHttpRequest at 'http://localhost:3000/tabela/list' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Z tego co wyczytalem, to jest to kolejne jakies zabezpieczenie i nie bardzo wiem jak to ugryzc. Gdzie mam dac tego headera? A moze jest jakies inne rozwiazanie?.
Z innego watka na forum wyczytalem, ze w Apachu mozna dodac w sekcji VirtualHost taka linie "Header set Access-Control-Allow-Origin "*" ", tyle, ze z tego co rozumiem, to calkowicie wylacza to zabezpiecznie. Czy da sie to jakos ograniczyc do konkretnych domen, lub jak w tym przypadku do konkretnych portow?
A jak to obejsc w tym testowym srodowisku (node.js)?
Jak zrobic ta komunikacje z serwerem, zeby to bylo bezpieczne?
Docelowo chcialbym dac to na moim serwerze ktory ma publiczny IP, ale bez domeny. Czy takie cos bedzie dzialac? a jesli tak, to co trzeba bedzie zmienic w kodzie?
Jak taka apke przeniesc na Apache? Domyslam sie, ze frontend bedzie dzialac na Apachu, a co z tym backenden? Ten express na nodzie ma dzialac caly czas w tle i pelnic role serwera dla zapytan z frontendu? Da sie to jakos zabezpieczyc przed wywaleniem sie? W sensie, czy da sie to uruchomic jako usluge SystemD, czy trzeba z palca na nosoli wpisywac?
Polecacie jakies ciekawe rozszerzenia do Firefoxa i Chromium?
Jesli macie jakies rady, to chetnie wyslucham.
Ponizej kod frontendu i backendu
<html>
<head>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(document).ready(function()
{
// alert("Hello, world!");
//robi cos, gdy cala strona jest zaladowana
});
</script>
<!-- Include one of jTable styles. -->
<link href="jtable/themes/metro/blue/jtable.min.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="jtable/jquery.jtable.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabela"></div>
<script type="text/javascript">
$(document).ready(function ()
{
$('#tabela').jtable({
title: 'Table of people',
actions: {
listAction: '/tabela/list',
createAction: '/tabela/create',
updateAction: '/tabela/update',
deleteAction: '/tabela/delete'
// listAction: '/GettingStarted/PersonList',
// createAction: '/GettingStarted/CreatePerson',
// updateAction: '/GettingStarted/UpdatePerson',
// deleteAction: '/GettingStarted/DeletePerson'
},
fields:
{
PersonId: {
key: true,
list: false
},
Name: {
title: 'Author Name',
width: '40%'
},
Age: {
title: 'Age',
width: '20%'
},
RecordDate: {
title: 'Record date',
width: '30%',
type: 'date',
create: false,
edit: false
}
},
actions: {
listAction: function (postData, jtParams) {
console.log("Loading from custom function...");
return $.Deferred(function ($dfd) {
$.ajax({
// url: '/tabela/list',
url: 'http://localhost:3000/tabela/list',
type: 'POST',
dataType: 'json',
data: postData,
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
},
deleteAction: function (postData) {
console.log("deleting from custom function...");
return $.Deferred(function ($dfd) {
$.ajax({
url: '/Demo/DeleteStudent',
type: 'POST',
dataType: 'json',
data: postData,
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
},
createAction: function (postData) {
console.log("creating from custom function...");
return $.Deferred(function ($dfd) {
$.ajax({
url: '/Demo/CreateStudent',
type: 'POST',
dataType: 'json',
data: postData,
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
},
updateAction: function(postData) {
console.log("updating from custom function...");
return $.Deferred(function ($dfd) {
$.ajax({
url: '/Demo/UpdateStudent',
type: 'POST',
dataType: 'json',
data: postData,
success: function (data) {
$dfd.resolve(data);
},
error: function () {
$dfd.reject();
}
});
});
}
},
// ajaxSettings:
// {
// type: 'GET',
// dataType: 'json'
// }
});
$('#tabela').jtable('load');
});
</script>
</body>
</html>
Backend
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send(req.headers);
});
app.get('/hello', function(req, res)
{
res.send("Hello World!");
});
app.get('/tabela/list', function(req, res)
{
res.setHeader('Content-Type', 'application/json');
res.send(JSON.stringify
(
{
"Result":"OK",
"Records":
[
{"PersonId":1,"Name":"Benjamin Button","Age":17,"RecordDate":"\/Date(1320259705710)\/"},
{"PersonId":2,"Name":"Douglas Adams","Age":42,"RecordDate":"\/Date(1320259705710)\/"},
{"PersonId":3,"Name":"Isaac Asimov","Age":26,"RecordDate":"\/Date(1320259705710)\/"},
{"PersonId":4,"Name":"Thomas More","Age":65,"RecordDate":"\/Date(1320259705710)\/"}
]
}
));
res.end()
});
app.all('/tabela/update', function(req, res){
res.send("You just called the post method at '/hello'!\n");
});
app.listen(3000);