Getting a json back from express.js using a jQuery get method does not work

Question

I am trying to pass a value as JSON from my back end to the front end of my application. I am currently running express.js and the connection for all post methods is PERFECT.

Upon a button click in the FRONT-END in my application I want to get back an invoice number from my server.

On the front end my code looks like this with jQuery:

$.get("/invoiceNumber", function(data) {
  console.log(data.number);
});

On the back end it looks like this:

app.get("/invoiceNumber", function(req, res) {
  res.json({ number: 4 });
});

Currently I am passing 4 just as a test.

The Error I am getting is:

GET http://127.0.0.1:3000/invoiceNumber 404 (Not Found)

If I try to go directly to:

http://127.0.0.1:3000/invoiceNumber

I get:

Cannot GET /invoiceNumber

did you started the server ? app.listen(3000)

Pranoy Sarkar
– Pranoy Sarkar

2018-11-23 09:48:27 +00:00
Commented Nov 23, 2018 at 9:48 — Pranoy Sarkar
– Pranoy Sarkar, Commented Nov 23, 2018 at 9:48
expressjs.com/en/resources/middleware/cors.html

Ishikawa Yoshi
– Ishikawa Yoshi

2018-11-23 09:59:52 +00:00
Commented Nov 23, 2018 at 9:59 — Ishikawa Yoshi
– Ishikawa Yoshi, Commented Nov 23, 2018 at 9:59

Ishikawa Yoshi · Accepted Answer · 2018-11-23 11:55:34Z

1

it looks that this question is duplicated How to allow CORS?

So you can enable all cors requests with

npm install cors

your App.js

var express = require('express')
var cors = require('cors')
var app = express()

app.use(cors())

app.get('/products/:id', function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for all origins!'})
})

app.listen(80, function () {
  console.log('CORS-enabled web server listening on port 80')
})

you can find additional information here https://expressjs.com/en/resources/middleware/cors.html#enable-cors-for-a-single-route

edited Nov 23, 2018 at 11:55

answered Nov 23, 2018 at 10:05

Ishikawa Yoshi

1,7798 gold badges22 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Pok3r Princ3 Over a year ago

I've installed & implemented the cors module, but i still get the same error. Any other ideas ?

Ishikawa Yoshi Over a year ago

'Access to XMLHttpRequest at 'localhost:3000/invoiceNumber' from origin '127.0.0.1:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.' this error 100% means that problem in cors

Ishikawa Yoshi Over a year ago

so you can see on screenshot that this should works, you need to check your code. Or post it here and we check

Ishikawa Yoshi Over a year ago

@Pok3rPrinc3 feel free to ask if you need any additional help

Pok3r Princ3 Over a year ago

Thanks for the time that you've put in helping me out Ishikawa, i'm trying to do all this to basically achieve this functionality: I'm using express.js and i have a server.js file in the root dir. of my project, and i have a public folder that i serve to the user's browser. I want to create a file in the root dir similar to the server.js (to be able to require NPM modules) that i can access from another file, in the public folder. If i try to do that right now i always get GET http://127.0.0.1:3000/invoices.js 404 (Not Found) I've tried ajax .get, plain .get, fetch full path, etc...

|

Luke Walker · Accepted Answer · 2018-11-23 09:51:51Z

0

Looks to me like you need to refrence where you back end is running from:

$.get("/invoiceNumber", function(data) {
  console.log(data.number);
});

if your express app is running on port 3000, change your front end to the following:

$.get("localhost:3000/invoiceNumber", function(data) {
  console.log(data.number);
});

answered Nov 23, 2018 at 9:51

Luke Walker

5015 silver badges19 bronze badges

2 Comments

Pok3r Princ3 Over a year ago

This allowed me to access the "localhost:3000/invoiceNumber" path in the browser, but i'm getting a

Access to XMLHttpRequest at 'localhost:3000/invoiceNumber' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

I'm also using Allow-Control-Allow-Origin: * to work around the Chrome restriction on localhost.

Luke Walker Over a year ago

Yes, Cors is a cross origin restiction, if your on chrome theres a chrome extention called "Moesif CORS" which will disable CORS for you.

Collectives™ on Stack Overflow

Getting a json back from express.js using a jQuery get method does not work

2 Answers 2

8 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related