'Access-Control-Allow-Origin' with jQuery getJSON

Question

I know there is no shortage of CORS questions on SO but none could help me in this circumstances:

I'd like to get JSON data from localhost backend using this jQuery snippet:

var SERVER_URL = "http://127.0.0.1:8080";

$.getJSON(SERVER_URL,function(result){
    console.log("result is", result);
  $.each(result, function(i, field){
    $("div").append(field + " ");
      });
    });

The snippet is loaded to index.html which is run on http://localhost:3000/index.html using this simple node static-file server:

var connect = require('connect');
var serveStatic = require('serve-static');
connect().use(serveStatic(__dirname)).listen(3000, function(){
    console.log('Server running on 3000...');
});

But in Chrome console I get:

Failed to load http://127.0.0.1:8080/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

I had the same issue in Firefox.

How can I fix this?

see https://github.com/cloudhead/node-static/issues/153 how to pass access-control-allow-oringin header — Lars-Olof Kreim, Jul 05 '18 at 06:17
@Lars-OlofKreim will you please elaborate your answer? I get error while trying to use that suggestion. — Babr, Jul 05 '18 at 06:22
hmm could you try the way how the set the header here: https://www.npmjs.com/package/serve-static#serve-all-files-as-downloads This is the packed you use, isn't it? — Lars-Olof Kreim, Jul 05 '18 at 06:32
@Lars-OlofKreim Yes, that's the package. But not sure how to modify it for CORS. — Babr, Jul 05 '18 at 06:35

Bhargav Chudasama · Answer 1 · 2018-07-05T06:36:33.703

0

install cors package

npm install cors

and use like this

var cors = require('cors');

const corsOptions = {
  methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE",  // use to manage api cross origin error
  origin: '*'
}

OR

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')
})

Run This Command it will open new chrome and run your code here

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

edited Jul 05 '18 at 06:36

answered Jul 05 '18 at 06:19

Bhargav Chudasama

6,928
5
21
39

Well, as you see, I don't use express. – Babr Jul 05 '18 at 06:24
i add two ways to use `cors` – Bhargav Chudasama Jul 05 '18 at 06:25
I tried your first solution and still get the CORS error. – Babr Jul 05 '18 at 06:30
i add another solution try it @Babr – Bhargav Chudasama Jul 05 '18 at 06:36
Thank god I'm not on Windows. :) – Babr Jul 05 '18 at 06:37
what happen bro any problem ? @Babr – Bhargav Chudasama Jul 05 '18 at 06:39
I tried your second solution and receive `Cannot GET /index.html`. I guess you need to add code for static file. – Babr Jul 05 '18 at 06:41

score 0 · Answer 2 · answered Jul 05 '18 at 06:21

0

You should set header Access-Control-Allow-Origin: * at your server. The way you should do is depend with your server side language.

Ex: PHP

<?php
header('Access-Control-Allow-Origin: *'); 
?>

answered Jul 05 '18 at 06:21

Jayasanka Weerasinghe

155
7

1

it's clearly about node.js not php – Lars-Olof Kreim Jul 05 '18 at 06:22
I don't use php sir. – Babr Jul 05 '18 at 06:31

'Access-Control-Allow-Origin' with jQuery getJSON

2 Answers2