Semplice applicazione Client-Server in Node.js con Api.ai: errore, perché?

[andbaz]

Ciao, sto costruendo una applicazione client-server per una chat tra gli utenti e la risposta proveniente da una Api (Api.ai). Questi sono i file, mi viene fuori un errore e non lo capisco:

Fetch API cannot load http://127.0.0.1:3000/?question=Hi. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
script.min.js:30 Error: TypeError: Failed to fetch

Dove sto sbagliando?
Grazie

client.js

var http = require('http');


document.getElementById('submit').onclick = () => {
  console.log('OK');
  const question = '/?question=' +  encodeURIComponent(document.getElementById('question').value);


  const options =
  {
    hostname: '127.0.0.1',
    port: 3000,
    path: question,
    method: 'GET',
    headers: {
      // Authorization: 'Bearer ' + clientAccessToken,
    },
  };


  http.get(options, (res) => {
    let body = '';
    res.on('data', (data) => {
      body += data;
    });
    res.on('end', () => {
      const result = JSON.parse(body);
      console.log('result' + result);
    });
  }).on('error', (e) => {
    console.log('Error: ' + e);
  });
};

server.js

var apiai = require('apiai');
const http = require('http');
var url = require('url');


const server = http.createServer((req, res) => {
  var parts = url.parse(req.url, true);
  var query = parts.query;
  console.log(query.question);
  var question = query.question;


  var app = apiai("xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx");


  var request = app.textRequest(question, {
      sessionId: '<unique session id>'
  });


  request.on('response', function(response) {
    var ress = response.result.fulfillment.speech;
    res.writeHead(200, {"Content-Type": "text/plain"});
    res.write(ress);
    // res.end(ress);
    console.log(response.result.fulfillment.speech);
  });


  request.on('error', function(error) {
      console.log(error);
  });


  request.end();
});


server.listen(3000);

[m4rko80]

Ciao, l'errore indicato e' diciamo piuttosto banale. Node js o meno stai facendo una chiamata client side verso un dominio che non è lo stesso dove gira l'applicazione e nella configurazione dell'host che riceve la chiamata non è settato appunto:

Access-Control-Allow-Origin : *
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Per una questione di sicurezza questa regola va abilitata per l'occasione.
L'alternativa è fare una chiamata sullo stesso host e fare la chiamate verso l'host esterno lato server

[andbaz]

Ciao, l'errore indicato e' diciamo piuttosto banale. Node js o meno stai facendo una chiamata client side verso un dominio che non è lo stesso dove gira l'applicazione e nella configurazione dell'host che riceve la chiamata non è settato appunto:

Access-Control-Allow-Origin : *
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Per una questione di sicurezza questa regola va abilitata per l'occasione.
L'alternativa è fare una chiamata sullo stesso host e fare la chiamate verso l'host esterno lato server

Wow hai ragione, funziona!

Ho semplicemente aggiunto dentro http.createServer() in server.js questa riga di codice e funziona:

res.setHeader('Access-Control-Allow-Origin', '*');

Quindi se mi funziona nel localhost, anche sul server remoto dovrebbe funzionare giusto?

Una cosa non capisco: il server ascolta sulla porta 3000 all'indirizzo 127.0.0.1, ma anche il client giusto? Non capisco il fatto che questo CORS sia stato necessario nel mio caso.

[m4rko80]

Una risposta potrebbe essere questa, nello specifico non ti so dire. https://stackoverflow.com/questions/...he-same-domain

[andbaz]

Ultimo errore che non capisco, poi chiudo il thread

Ho provato a caricare sul mio server remoto l'applicazione a cui ho modificato gli inirizzi

Ma sembra non funzionare, in locale mi ritorna ###########****************<RISPOSTA>

Invece in remoto:

OK
VM74:1 GET http://its4vr.altervista.org:3000/bazbot/?question=Hi net::ERR_CONNECTION_REFUSED
script.min.js:31 Error: TypeError: Failed to fetch


client.js

js
var http = require('http');


document.getElementById('submit').onclick = () => {
  console.log('OK');
  const question = '?question=' +  encodeURIComponent(document.getElementById('question').value);


  const options =
  {
    hostname: 'its4vr.altervista.org',
    port: 3000,
    path: '/bazbot/' + question,
    method: 'GET',
    headers: {
      // Authorization: 'Bearer ' + clientAccessToken,
    },
  };


  http.get(options, (res) => {
    let body = '';
    res.on('data', (data) => {
      body += data;
    });
    res.on('end', () => {
      const result = body;
      console.log('####################' + result);
      document.getElementById('answer').innerHTML = result;
    });
  }).on('error', (e) => {
    console.log('Error: ' + e);
  });
};

server.js

js
var apiai = require('apiai');
const http = require('http');
var url = require('url');


const server = http.createServer((req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*');


  var parts = url.parse(req.url, true);
  var query = parts.query;
  console.log(query.question);
  var question = query.question;


  var app = apiai("xxxxxxxxxxxxxxxxxxxxxxxxx");


  var request = app.textRequest(question, {
      sessionId: '<unique session id>'
  });


  request.on('response', function(response) {
    var ress = response.result.fulfillment.speech;
    res.writeHead(200, {"Content-Type": "text/plain"});
    res.write('******************' + ress);
    res.end();
    console.log(response.result.fulfillment.speech);
  });


  request.on('error', function(error) {
      console.log(error);
  });


  request.end();
});


server.listen(3000);

[andbaz]

Ok ho capito perché: in fase di sviluppo lanciavo Gulp che con gulp-forever-monitor avviava il server ma ora in remoto in fase di produzione non ho nessun motore che accenda il server quindi provo a trovare una soluzione.

[andbaz]

Ok niente da fare, non ci riesco perché nonostante abbia studiato non riesco a capirne il funzionamento per cui resto dell'idea di utilizzare Api.ai solo lato client e non server e funziona anche se credo non sia così giusto utilizzare perché non c'è nessun accenno sul README.md di Api.ai...

Voi cosa ne dite? Ormai chiedo e rispondo da solo, ma lo capisco.

const https = require('https');


const clientAccessToken = 'XXXXXXXXXXXXXXXXXXXXXXXXX';


const callback = (data) => {
  console.log(data);
  document.getElementById('answer').innerHTML = data.result.speech;
};


document.getElementById('submit').onclick = () => {
  const question = document.getElementById('question').value;


  const options =
  {
    hostname: 'api.api.ai',
    path: '/v1/query?lang=EN&query=' + encodeURIComponent(question) + '&sessionId=1',
    method: 'GET',
    headers: {
      Authorization: 'Bearer ' + clientAccessToken,
    },
  };


  https.get(options, (res) => {
    let body = '';
    res.on('data', (data) => {
      body += data;
    });
    res.on('end', () => {
      const result = JSON.parse(body);
      callback(result);
    });
  }).on('error', (e) => {
    console.log('Error: ' + e);
  });
};