Make an api with node.js

Question

I have tried build an api using node.js (+express). The Firefox display it but when I try to load it with loadJSON from p5.js it shows weird error. Here is node.js code (based on this: modulus: create api with node.js ):

express = require("express");
app = express();
app.listen(4000);

var quotes = [
  { author : 'Audrey Hepburn', text : "Nothing is impossible, the word itself says 'I'm possible'!"},
  { author : 'Walt Disney', text : "You may not realize it when it happens, but a kick in the teeth may be the best thing in the world for you"},
  { author : 'Unknown', text : "Even the greatest was once a beginner. Don't be afraid to take that first step."},
  { author : 'Neale Donald Walsch', text : "You are afraid to die, and you're afraid to live. What a way to exist."}
];


app.get('/', function(req, res){
  res.json(quotes);
})

p5.js:

function setup() {
  loadJSON("http://localhost:4000/", getJson, error1);
}

function getJson(data) {
  console.log("json get");
  console.log(data)
}

function error1(err) {
  console.log("Error: ");
  console.log(err);
}

Error:

"Error: "
{
  "statusText": "",
  "status": 0,
  "responseURL": "",
  "response": "",
  "responseType": "",
  "responseXML": null,
  "responseText": "",
  "upload": {
    "ontimeout": null,
    "onprogress": null,
    "onloadstart": null,
    "onloadend": null,
    "onload": null,
    "onerror": null,
    "onabort": null
  },
  "withCredentials": false,
  "readyState": 4,
  "timeout": 0,
  "ontimeout": null,
  "onprogress": null,
  "onloadstart": null,
  "onloadend": null,
  "onload": null,
  "onerror": null,
  "onabort": null
}

I have tried using 'jsonp' but it shows this:

5209: Uncaught TypeError: Cannot read property 'responseText' of undefined

I have node.js v4.2.2 and p5.js v0.5.4 October 01, 2016.

Answer 1

I seems likely that you have a cross origin issue when accessing the API from a browser.

What errors do you see in the browser console? If so, you can fix it by either allowing cross origin access on your server or by loading your web page from the same web server (which would make your api the same origin).