L1ghtk3ira L1ghtk3ira - 3 months ago 16
Ajax Question

Node Js: No 'Access-Control-Allow-Origin' header is present on the requested

This question is similar to others however there is a difference that makes it very confusing why it is not working.

My javaScript was calling 6 json files and all worked correctly. In Node JS I have cors and headers set up as shown below:

var fs = require('fs');
var http = require("https");
var express = require('express');
var app = express();
var path = require('path');
var http = require("http");
var url = require("url");
var req = require('request')
var pem = require('pem');
var cors = require("cors");

app.use(express.static(path.join(__dirname, '../')));

app.listen(process.env.PORT || 8080);

app.options('*', cors());

app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested- With, Content-Type, Accept");
next();
});

app.all('/posts', function(req, res){
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
});

app.get('/', function (req, res) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.writeHead(200, {'Content-Type': 'text/plain'});
contents = fs.readFileSync("sliderImages.json", "utf8");
console.log(path.join(__dirname, '/sliderImages.json'));
res.end(contents);


});

All 6 json files are grabbed from the absolute URL path by Node JS. I have made 2 more yesterday and everything was working fine. However, today I made one and implemented the same way and received the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I am implementing each the same way, example:

var base_url = 'http://127.0.0.1:8080';

mainInformationTop();

function mainInformationTop()
{
$.ajax({
type: "GET",
url: base_url + "/api/topInformation.json",
dataType: "json",
success: function(response)
{
var json_obj = response.mainDescription;
var imagesSlider="";
var imagesSliderDescription ="";
for (var i = 0; i< json_obj.length; i++)
{

}

}
,
error: function(jqXHR, textStatus, errorThrown) {
alert(jqXHR.status);
}
})
}


I dont think the json file is relevant but below is my json file:

{"mainDescription":[
{
"display": "my display",
"description" : "my description"
}
]}


I have took out the information in the for loop for testing as well as my append because irrelevant. For some reason it fails and goes to error instead of success. All other calls are set up the same way and work correctly.

Any help on why this is happening is greatly appreciated. Thanks in advance.

Answer

Fixed it.

var fs = require('fs');
var http = require("https");
var express = require('express');
var app = express();
var path = require('path');
var http = require("http");
var url = require("url");
var req = require('request')
var pem = require('pem');
var cors = require("cors");

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});
app.use(express.static(path.join(__dirname, '../')));

app.listen(process.env.PORT || 8080);

app.options('*', cors()); 

app.all('/*', function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:8080");
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "X-Requested-With,     Content-Type");
    next();
});

app.get('/', function (req, res) { 
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
    res.writeHead(200, {'Content-Type': 'text/plain'});
    contents = fs.readFileSync("sliderImages.json", "utf8");
    console.log(path.join(__dirname, '/sliderImages.json'));
    res.end(contents);
 });

Despite what the comments said the only real thing I changed was moving the app.use before everything else. This solved the issue.

Comments