Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Node.Js error "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 don't 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.

like image 417
L1ghtk3ira Avatar asked May 26 '16 15:05

L1ghtk3ira


Video Answer


2 Answers

This is a much more simple version of this answer which achieves the same effect:

var fs = require('fs');
var express = require('express');
var cors = require('cors');

var app = express();

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

app.get('/', function (req, res) { 
  res.writeHead(200, {'Content-Type': 'text/plain'});
  contents = fs.readFileSync('sliderImages.json', 'utf8');
  res.end(contents);
});

app.listen(process.env.PORT || 8080);
like image 102
Chris Foster Avatar answered Oct 14 '22 23:10

Chris Foster


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.

like image 25
L1ghtk3ira Avatar answered Oct 14 '22 21:10

L1ghtk3ira