Inside my application code, for a specific set of APIs, I'm making a NodeJS request like following, which should return a image as the body. This same request works fine on Postman (and I can see the image).
module.exports = {
getThumbnail: function (thumbnailUrn, env, token, onsuccess){
request({
url: config.baseURL(env) + config.thumbail(thumbnailUrn),
method: "GET",
headers: {
'Authorization': 'Bearer ' + token,
}
}, function (error, response, body) {
// error check removed for simplicity...
onsuccess(body);
});
}
}
The above code run under my own security checks and adds the token header. It works fine (request calls return 200/OK).
Now on my app router I want to respond this as an image, but the output is not being interpreted as an image. Here is what I have:
var dm = require(/*the above code*/);
// express router
var express = require('express');
var router = express.Router();
router.get('/getThumbnail', function (req, res) {
var urn = req.query.urn;
dm.getThumbnail(urn, req.session.env, req.session.oauthcode, function (thumb) {
res.writeHead(200,
{
'Content-Type': 'image/png'
}
);
// at this point, the 'thumb' variable is filled
// but I believe is not properly encoded...
// or maybe the res.end output is missing something...
res.end(thumb, 'binary');
});
});
module.exports = router;
EDIT: as commented by Nodari Lipartiya, this is kind of proxy behaviour ( server(responds with image) -> proxy (node.js/resends to client) -> end user)
I'm not sure what is coming back in thumb, but the following snippet seemed to work for me (bypassing Express for simplicity):
var http = require("http")
var fs = require("fs")
var server = http.createServer(listener)
server.listen(() => {
console.log(server.address().port)
})
var binary = fs.readFileSync("path to local image")
function listener(req, resp) {
resp.writeHead(200,
{
'Content-Type': 'image/png'
}
);
resp.end(new Buffer(binary), "binary")
}
What happens if you wrap it in a Buffer?
If I've understood everything correctly:
I did this
server.js
var fs = require('fs');
var express = require('express');
var app = express();
app.get('/img', function(req, res, next) {
var stream = fs.createReadStream('img.jpeg');
var filename = "img.jpeg";
filename = encodeURIComponent(filename);
res.setHeader('Content-disposition', 'inline; filename="' + filename + '"');
res.setHeader('Content-type', 'image/jpeg');
stream.pipe(res);
});
app.listen(9999, function () {
console.log('Example app listening on port 9999!');
});
proxy.js
var request = require('request');
var express = require('express');
var app = express();
app.get('/img', function(req, res, next) {
console.log('proxy/img');
request({
url: 'http://localhost:9999/img',
method: "GET",
}, function (error, response, body) {
res.end(body, 'binary');
});
});
app.listen(9998, function () {
console.log('Example app listening on port 9998!');
});
req.js
var request = require('request');
request({
url: 'http://localhost:9998/img',
method: "GET",
}, function (error, response, body) {
console.log('body', body);
});
works for me. Please, let me know if you'll need help.
Related
I'm learning server-side javascript and am trying to test a GET request using postman where the server (server.js) receives a request for products.html (products.js) and returns the products JSON.
My files are packaged via npm, products.js is held in node_modules, and when I run server.js in command and then open localhost:3000 in browser, I can see that it's connecting. But, the browser returns a 404 and command shows a 400.
I feel like this is likely a syntax or file path error (or possibly I just don't know how to use postman), but I've been running myself in circles trying to fix. Anything stand out as wrong / any advice on how to correct?
//server.js
var fs = require('fs');
var http = require('http');
var url = require('url');
var product_mgr = require('product_manager'),
path=require('path');
//create server that listens on port 3000
http.createServer(function(req, res) {
var urlObj = url.parse(req.url, true, false);
var filename = urlObj.pathname;
fs.readFile(filename, function (err, data) {
// if url not returned, show error code 404
if (err) {
res.writeHead(404, {'Content-Type': 'application/json'});
return res.end("404 Not Found");
} else {
// if url returned, show success code 200
res.writeHead(200, {'Content-Type': 'application/json'});
res.write(data);
return res.end();
}});
}).listen(3000, function() {
console.log('Listening on port 3000.');
});
//products.js
//create class that represents a product
//include name, price, description and qty
class Product {
constructor(name, price, description, qty) {
this.name = name;
this.price = price;
this.description = description;
this.qty = qty;
};
};
var product_1 = new Product('Yo Yo', 2.99, 'Spinning Toy', 40);
var product_2 = new Product('Hot Wheel', 1.99, 'Tiny Toy Car', 30);
var product_3 = new Product('Glove', 23.49, 'Baseball Glove', 12);
var productArray = [product_1, product_2, product_3];
//create function called products which returns JSON array of product info
function products() {
return JSON.stringify(productArray)
};
//export products function
exports.products = products;
var fs = require('fs');
var http = require('http');
var url = require('url');
var product_mgr = require('product_manager');
http.createServer(function(req, res) {
var urlObj = url.parse(req.url, true, false);
var filename = "." + urlObj.pathname;
if (req.method == "GET" && req.url == "/products.html") {
res.writeHead(200, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify({
error: null
}));
} else {
res.writeHead(404, {
'Content-Type': 'application/json'
});
res.end(JSON.stringify({
error: "Invalid Request"
}));
}
}).listen(3000, function() {
console.log('Listening on port 3000.');
});
Below are my server side and client side JavaScript files. I have hard coded queryObject in server side script I can display the body in client-side.
The problem is how to get value from client side for queryObject variable in server side and override the existing values.
In short, current program converts USD to GBP as I hard-coded it. I want a way to access queryObject from client side and give my own values.
//=====================Server Side Script========================//
var request = require('request');
const path = require("path");
const express = require("express");
const app = express();
// const hbs = require("hbs");
const port = process.env.PORT || 3000;
const pathPublic = path.join(__dirname, "../public");
const pathView = path.join(__dirname, "../templates/views");
app.set("view engine", "hbs");
app.set("views", pathView);
app.use(express.static(pathPublic));
app.get("", (req, res) => {
res.render("home", {
title: "Currency Converter"
});
});
app.get("/currency", (req, res) => {
const uri = "https://currency-exchange.p.rapidapi.com/exchange?",
headers={
'x-rapidapi-host': 'currency-exchange.p.rapidapi.com',
'x-rapidapi-key': 'b13c4f3d67msh8143a7f1298de7bp1e8586jsn4453f885a4e7'
}
const queryObject = {
q: 1,
from: 'USD',
to: 'GBP'
};
request({
url:uri,
qs:queryObject,
headers: headers
},
function (error, response, body) {
if (error) {
console.log('error:', error); // Print the error if one occurred
} else if(response && body) {
console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
res.json({'body': body}); // Print JSON response.
}
})
});
app.listen(port, () => {
console.log("Server is running on port " + port);
});
//=====================Client Side Script========================//
const currency = document.querySelector("#currency");
const text1= document.querySelector(".text1");
const text2= document.querySelector(".text2");
const text3= document.querySelector(".text3");
const Form = document.querySelector("form");
function refreshPage() {
window.location.reload();
}
Form.addEventListener("submit", e => {
e.preventDefault();
fetch("http://localhost:3000/currency").then(response => {
response.json().then(data => {
if (data.error) {
console.log(data.error);
} else {
currency.textContent = data.body;
}
});
});
SOLUTION:
In order to modify any values in server, you have to send appropriate HTTP method (eg: POST) with appropriate data in it. And let the server handle the request to change the content of object to make an API call from there.
I made some changes in your code for demonstration and install 'cors', 'body-parser' module and other missing modules to make it run.
HTML:
<!DOCTYPE html>
<html>
<body>
<div id="currencyType">
<select id="fromCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
</select>
<select id="toCurrency">
<option value="USD">USD</option>
<option value="GBP">GBP</option>
</select>
</div>
<button type="button" id="getCurrency">Get Currency</button>
<div id="currency" name="currency" type="text"></div>
<script>
const currency = document.querySelector("#currency");
const btn = document.getElementById("getCurrency");
function refreshPage() {
window.location.reload();
}
btn.addEventListener("click", e => {
var fromCurrency = document.getElementById("fromCurrency");
fromCurrency = fromCurrency.options[fromCurrency.selectedIndex].value;
var toCurrency = document.getElementById("toCurrency");
toCurrency = toCurrency.options[toCurrency.selectedIndex].value;
var data = {
fromCurrency: fromCurrency,
toCurrency: toCurrency
};
// calls the API with POST method with data in it
fetch("http://localhost:3000/currency", {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data)
}).then(response => {
response.json().then(data => {
if (data.error) {
console.log(data.error);
} else {
currency.textContent = "1 " + fromCurrency + " = " + data.body + " " + toCurrency;
}
});
});
});
</script>
</body>
</html>
NodeJS:
var request = require('request');
const path = require("path");
const express = require("express");
const app = express();
var cors = require('cors')
// const hbs = require("hbs");
var bodyParser = require('body-parser');
const port = process.env.PORT || 3000;
const pathPublic = path.join(__dirname, "public");
const pathView = path.join(__dirname, "templates/views");
app.set("view engine", "hbs");
app.set("views", pathView);
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static(pathPublic));
app.use(cors())
app.get("", (req, res) => {
res.render("home", {
title: "Currency Converter"
});
});
app.post("/currency", (req, res) => {
console.log(req.body);
const uri = "https://currency-exchange.p.rapidapi.com/exchange?",
headers={
'x-rapidapi-host': 'currency-exchange.p.rapidapi.com',
'x-rapidapi-key': 'b13c4f3d67msh8143a7f1298de7bp1e8586jsn4453f885a4e7'
}
const queryObject = {
q: 1,
from: req.body.fromCurrency,
to: req.body.toCurrency
};
console.log(queryObject);
request({
url:uri,
qs:queryObject,
headers: headers
}, function (error, response, body) {
if (error) {
console.log('error:', error); // Print the error if one occurred
} else if(response && body) {
console.log('statusCode:', response && response.statusCode); // Print the response status code if a response was received
res.json({'body': body}); // Print JSON response.
}
})
});
app.listen(port, () => {
console.log("Server is running on port " + port);
});
Sample output:
You'll code in client-side to send a request to server-side containing the query object.
And on the server-side, you pick up your query object.
There are so many ways of doing this.
Using a GET request with parameters - On the server-side your query object will be available at res.query.params
Using a POST request - On the server side you will want to use the body-parser plugin for parsing your response body and hence, your data will be available at res.body
Read on body parser
I want to stream events to localhost/czml - which works fine in the console or in the get request window. But I can't stream those variables to the page because req.query always ends up being undefined
I'm a bloody beginner in programming and most of the time I have no clue what I'm doing (that's why the code is so bad...). I got that code through trial and error and mostly through copying from somewhere
var express = require('express'),
fs = require('fs'),
morgan = require('morgan'),
path = require('path'),
os = require('os'),
http = require('http');
const app = express();
const EventEmitter = require('events');
const stream = new EventEmitter();
var czmlstream = fs.createWriteStream('czml.czml',{flags: 'a'});
app.get('/czml', function (req, res, next) {
//don't log favicon
if (req.url === '/favicon.ico'){
res.end();
return;
}
//only log GET and set to stream
if (req.method === 'GET' ) {
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
function createCzml() {
//get the query value from the request
var id = req.query.id;
var lon = parseInt(req.query.lon);
var lat = parseInt(req.query.lat);
var alt = parseInt(req.query.alt);
// custom json format for czml file
var entity = {
"id": id,
"position": {
"cartographicDegrees": [lat, lon, alt]
},
"point": {
"color" : {"rgba": [0,0,255,255]},
"pixelSize": 20
}
};
return entity;
}
//first 2 lines for the event stream
res.write('event: czml\n');
res.write('data:' + JSON.stringify({ "id":"document", "version":"1.0" })+
'\n\n');
//always tells me that 10 listeners are added .... ?
stream.setMaxListeners(0);
//stream.on(req) = emit event on get request?
stream.on('req', function() {
res.write('event: czml\n');
res.write('data:' +JSON.stringify(createCzml)+ '\n\n'); //this
doesn't work
});
//not sure why this is needed
stream.emit('req');
}else{
res.WriteHead(405, {'Content-Type': 'text/plain'});
res.end('No GET Request - not allowed');
}
//morgan(format, {stream: czmlstream})(req,res,next);
}).listen(8000);
console.log('Server running');
What I want to achieve:
someone sends a get request to localhost/czml/?id=1&lon=-40&lat=30&alt=5000 => those queries are parsed and sent to localhost/whatever as event-stream in the format of:
event: czml
data: {json}
I'm nearly there (even if the code is bad) - it's just the last part left where I have to write those pesky queries to localhost/whatever. Right now it loggs everything fine in the console, but undefined is written to localhost/whatever...
I would be very grateful if you can point me in the right direction - keep in mind though, that I need easy and good explanations ;)
ok I solved this on my own and just for reference for some other newcomers:
It's basically this Example, only with listeners (as I understood them) for get requests
// most basic dependencies
var express = require('express')
, http = require('http')
, os = require('os')
, path = require('path')
, url = require('url')
, fs = require('fs');
// create the app
var app = express();
// configure everything, just basic setup
//app.set('port', process.env.PORT || 8000);
app.use(function(req, resp, next) {
resp.header("Access-Control-Allow-Origin", "*");
resp.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
// Serve the www directory statically
app.use(express.static('www'));
//---------------------------------------
// Handle Get request and event-stream every second
//---------------------------------------
var openConnections = [];
var id, lon, lat, alt;
app.get('/czml', function(req, res, next) {
//don't log favicon
if (req.url === '/favicon.ico'){
res.end();
return;
} else {
var queryData = url.parse(req.url, true).query;
id = queryData.id;
lon = queryData.lon;
lat = queryData.lat;
alt = queryData.alt;
req.socket.setTimeout(2 * 60 * 1000);
// send headers for event-stream connection
// see spec for more information
res.writeHead(200, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.write('\n');
// push this res object to our global variable
openConnections.push(res);
// send document packet
res.write('event: czml\ndata:' + JSON.stringify({ "id":"document", "version":"1.0" })+ '\n\n');
// When the request is closed, e.g. the browser window
// is closed. We search through the open connections
// array and remove this connection.
req.on("close", function() {
var toRemove;
for (var j =0 ; j < openConnections.length ; j++) {
if (openConnections[j] == res) {
toRemove =j;
break;
}
}
openConnections.splice(j,1);
});
next();
}
}).listen(8000);
function createMsg() {
var entity = {
"id" : id,
"position" : {
"cartographicDegrees": [lon,lat,alt]
},
"point" : {
"color" : {
"rgba" : [0,0,255,255]
},
"pixelSize" : 15
}
};
return JSON.stringify(entity);;
}
setInterval(function() {
// we walk through each connection
openConnections.forEach(function(res) {
// send doc
res.write('event: czml\n');
res.write('data:' + createMsg() + '\n\n');
});
}, 1000);
I don't know how this works here on SO - the above isn't really the answer to my question - more of a workaround. But it works, so I guess it's fine :)
I have a REST API server which is running on one VM1. On other VM2 machine I have built a node js server which is running as proxy. On the same VM2 machine I have application (hosted with apache which serves only html, js and css files). My node js server only resends the api calls back to the API server. This is working fine, until new requirement arrive - to add a new API endpoint (on the node js server) to download files (csv). In order to make download happen, I need to use GET method. The thing is that the required data is available only on POST endpoint from the main API server, and I am calling the API endpoint to get the data and send it back. This is the code I am trying to work it out:
var express = require('express');
var cors = require('cors');
var request = require('request');
var http = require('http');
var csv = require("fast-csv");
var config = require("./config.js");
var corsOptions = {
origin: function(origin, callback){
var originIsWhitelisted = config.whitelist.indexOf(origin) !== -1;
callback(null, originIsWhitelisted);
}
};
var handler = function (req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World\n');
};
var app = express();
// Enable CORS for all requests
app.use(cors(corsOptions));
app.options('*', cors(corsOptions)); // specially for pre-flight requests
app.get('/download', function(req, res){
var limit = req.query.limit;
var offset = req.query.offset;
var options = {
method: 'POST',
url: config.apiServerHost + '/search',
useQuerystring: true,
qs: {'limit': limit, 'offset': offset},
rejectUnauthorized: false,
body: 'from=date&to=date'
};
var filename = 'data.csv';
res.setHeader('Content-disposition', 'attachment; filename=\"data.csv\"');
res.setHeader('content-type', 'text/csv');
var csvStream = csv.createWriteStream({
headers: true,
objectMode: true,
transform: function (row) {
return row;
}
});
console.log(options);
function callback(error, response, body) {
if (!error && response.statusCode == 200) {
var data = JSON.parse(body);
for(var i = 0; i < data.length; i++)
csvStream.write({
"col1": "value1-"+data[0][i],
"col2": "value2-"+data[1][i],
"col3": "value3-"+data[2][i],
"col4": "value4-"+data[3][i]
});
}
csvStream.end();
}
else {
console.log("Error:", error, body);
}
}
req.pipe(request(options, callback));//.pipe(res)
csvStream.pipe(res);
});
app.use('/api', function(req, res) {
var url = config.apiServerHost + req.url;
console.log(url);
req.pipe(request({
"rejectUnauthorized": false,
"url": url
}, function(error, response, body){
if(error) {
console.log(new Date().toLocaleString(), error);
}
})).pipe(res);
});
This all code works fine when request method is POST (the same as main API server). However I receive "[Error: write after end]" when I add the body in options object. Can someone help me figure out what is happening and how to solve this problem? Thanks.
The [Error: write after end] show pip data after .end(), for your codes
req.pipe(request(options, callback));//.pipe(res)
csvStream.pipe(res);
In the callback function, the csvStream.end(); is called, then invoke csvStream.pipe could cause this error.
I would like to develop a client server side with nodejs and javascript/jquery but I am stuck.
I have a big form, user submits and data are send to /getData url and that works perfectly. But my problem now it's when I want to get those data from /getData to my client side.
This is my client file:
var client = {};
client.start = function () {
client.getData();
};
client.cb_get = function () {
var data={};
if (this.readyState == 4 && this.status == 200) {
data= JSON.parse(this.responseText);
alert("We get the data" + JSON.stringify(data, null, 4));
client.chart(data);
} else {
alert("Sorry this page is not allow without processing any form");
}
};
client.get = function(req, cb) {
var xhr = new XMLHttpRequest();
xhr.open("GET", req, true);
xhr.onreadystatechange = cb;
xhr.send();
};
client.getData= function () {
var req="http://localhost:3000/getData";
client.get(req,client.cb_get);
};
client.chart= function (data) {
//Display data as charts using jquery in an other html page.
};
window.onload = setTimeout(client.start, 1);
HTMLElement.prototype.has_class = function (c)
{
return this.className.indexOf(c) >= 0;
};
But I have a 404 error all the time and I don't know why.
my server file :
var express = require('express')
bodyParser =require("body-parser");
routes= require('./router.js');
var app= express();
app.use(express.static(__dirname + '/'));
//Here we are configuring express to use body-parser as middle-ware.
app.use(bodyParser.urlencoded({ extended: false }));
//define our routes
app.get('/', routes.index); //open home page
app.get('/simulation', routes.simulation);
app.get('/chartData', routes.chartData);
app.post('/getData', routes.getData);
//In case of malicious attacks or mistyped URLs
app.all('*', function(req, res){
res.send(404);
})
var server = app.listen(3000, function () {
var host = server.address().address
var port = server.address().port
console.log('Example app listening at http://%s:%s', host, port)
})
my router file:
module.exports.index= function(req, res){
fs.readFile('index.html', function(err, page) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(page);
res.end();
});
};
module.exports.simulation= function(req, res){
fs.readFile('simulation.html', function(err, page) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(page);
res.end();
});
};
module.exports.chartData= function(req,res) {
fs.readFile('chartPage.html', function(err, page) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write(page);
res.end();
});
};
module.exports.getData= function(req,res) {
var data= {};
data= req.body;
res.send(JSON.stringify(data, null, 4));
console.log(req.body);
};
So where I am wrong?
Moreover, when I submit, my /getdata page opens (normal due to action= /getData specified in my form tag) but I want to open directly my html page with charts. How can I do that?
Sorry guys for my long post, but I really need help.
Your ajax request does
xhr.open("GET", "http://localhost:3000/getData", true);
your route listens for
app.post('/getData', routes.getData);
notice how you send a GET request and listen for a POST request, it's not the same thing, so you end up in the 404 route instead.
You either have to change the ajax request, and send a POST request, or the route and listen for a GET request.