No 'Access-Control-Allow-Origin' - Node / Apache Port Issue

Question

i've created a small API using Node/Express and trying to pull data using Angularjs but as my html page is running under apache on localhost:8888 and node API is listen on port 3000, i am getting the No 'Access-Control-Allow-Origin'. I tried using node-http-proxy and Vhosts Apache but not having much succes, please see full error and code below.

XMLHttpRequest cannot load localhost:3000. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:8888' is therefore not allowed access."

// Api Using Node/Express    
var express = require('express');
var app = express();
var contractors = [
    {   
     "id": "1", 
        "name": "Joe Blogg",
        "Weeks": 3,
        "Photo": "1.png"
    }
];

app.use(express.bodyParser());

app.get('/', function(req, res) {
  res.json(contractors);
});
app.listen(process.env.PORT || 3000);
console.log('Server is running on Port 3000')

Angular code

angular.module('contractorsApp', [])
.controller('ContractorsCtrl', function($scope, $http,$routeParams) {

   $http.get('localhost:3000').then(function(response) {
       var data = response.data;
       $scope.contractors = data;
   })

HTML

<body ng-app="contractorsApp">
    <div ng-controller="ContractorsCtrl"> 
        <ul>
            <li ng-repeat="person in contractors">{{person.name}}</li>
        </ul>
    </div>
</body>

potentially related: [No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API](/q/43871637/11107541) — starball, May 06 '23 at 00:39

score 823 · Accepted Answer · edited Sep 13 '22 at 13:30

823

Try adding the following middleware to your NodeJS/Express app (I have added some comments for your convenience):

// Add headers before the routes are defined
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

(You might need to use 127.0.0.1 instead of localhost.)

edited Sep 13 '22 at 13:30

Philippe Fanaro

6,148
6
38
76

answered Aug 19 '13 at 10:23

jvandemo

13,046
2
23
18

4

Can you help specify exactly where that goes? I have the following code in my server. Does it go right after this? var app = require('express')() , server = require('http').createServer(app) , io = require('socket.io').listen(server) , request = require("request") , url = require("url"); server.listen(6969); // does it go here? on a new line? – Art Geigel Oct 14 '13 at 22:06
It is a middleware function. You can put it after the `require` lines and before the `server.listen` line. Hope that helps! – jvandemo Oct 19 '13 at 13:37
1

@jvandemo do i have to change the app.get('/', function(req, res) to ...function(req, res, next) ? – Sangram Singh Dec 01 '13 at 03:47
@SangramSingh Yes, the `next` argument is optional but you need to specify it in case you use it inside your function. – jvandemo Dec 25 '13 at 05:42
33

You are my favorite person ever right now. Thank you. Can we add a note that this code has to happen before the routes are defined for noobs like me? – gegillam Feb 04 '16 at 03:01
What if i am using 3rd Party API ? I can't add "Allow Access" on their server. You are showing example of local project. I am having same issue but with my request is goes to another website url. How to fix it any idea ? – Gurpinder Apr 27 '16 at 09:16
@Gurpinder - CORS was created to prevent client from unauthorized access. If you want to have access, you need the 3rd party app owner to add you to his authorized users. Else I can simply create my own MyGoogle website, provide search query, and present the results as my own. – Mahesh Oct 04 '16 at 15:51
@gegillam -> Thanks for your comment. I was adding this line after the routes were defined. :/ It works fine after putting the above code, just after creating the app object. – Mahesh Oct 04 '16 at 15:59
1

How to make this work while using the request module? – Rohit Tigga Nov 26 '16 at 23:04
@RohitTigga did you ever find how to get this working with `request`? – Paul Fitzgerald Dec 02 '16 at 17:07
Wow buddy this is the ultimate hat trick, thanks man, I would never guess this solution. – Pedro Emilio Borrego Rached Jan 13 '17 at 20:18
3

It did not work in my case. Still getting this error: "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://abc.xyz.net:212' is therefore not allowed access. The response had HTTP status code 500." – user1451111 Feb 13 '18 at 11:47
perfect, for testing I replaced 'http://localhost:8888' with '*' not safe, but great for testing – Johan Hoeksma Jul 18 '18 at 08:03
@JohanHoeksma is there a reason why that isn't so safe? How did you setup for production? – Kubie Jul 02 '19 at 14:41
So any origin can connect now. For a localhost it's not a problem. On a server I think you don't want it... – Johan Hoeksma Jul 02 '19 at 15:37
Thank you - I was tearing my hair out trying to get this working. Worth noting that the website is case sensitive. – Cowthulhu Nov 21 '19 at 21:15
1

I wish I bumped into this 4 hours ago! – Program-Me-Rev Apr 24 '20 at 00:56
How to fix this in hapiJS – Yuyutsu Jun 20 '20 at 18:43
I ran into this problem with a POST request but it had to do with the upload size being too large. It was a very misleading error. – Soth Jul 27 '21 at 13:44
How do we allow for all origins instead of just localhost:8888 ? Is adding an asterisk instead of url like res.setHeader('Access-Control-Allow-Origin', '*'); a valid way ? – Rushikesh Shelke Dec 27 '21 at 16:38

score 136 · Answer 2 · edited Sep 13 '22 at 13:42

136

Accepted answer is fine, in case you prefer something shorter, you may use a plugin called cors available for Express.js.

It's simple to use, for this particular case:

var cors = require('cors');

// use it before all route definitions
app.use(cors({origin: 'http://localhost:8888'}));

(You might need to use 127.0.0.1 instead of localhost.)

The request origin needs to match the allowed origin(s), and you can also have multiple of them:

app.use(
  cors({origin: ['http://localhost:8888', 'http://127.0.0.1:8888']})
);

edited Sep 13 '22 at 13:42

Philippe Fanaro

6,148
6
38
76

answered Dec 18 '15 at 00:11

Fabiano Soriani

8,182
9
43
59

4

I had to use `{origin: 'null'}` for it to work... Apparently, my browser sends `null` as the origin? – Ricardo Magalhães Cruz Jul 03 '16 at 11:17
2

Why reinvent the wheel. I am always for a packaged solution compared to code snippet – Pierre Jan 04 '17 at 20:14
sweet little library that handled my use case of wanting different methods from different origins quite nicely... and less code fatigue for the next guy looking at it. – Kyle Baker Feb 15 '17 at 19:41
9

Thanks, `app.use(cors({origin: '*'}));` worked for me, as per [enable-cors](https://enable-cors.org/server_expressjs.html). – danialk Aug 26 '17 at 17:02
3

I suggest having a look at the [npm cors page](https://www.npmjs.com/package/cors) to make better use of it. It made things very clear for me =). – 13013SwagR Mar 17 '19 at 17:53
How to fixed this in HapiJS – Yuyutsu Jun 20 '20 at 18:46
I'm new, how to input multiple origin with above code? – Shaheer Wasti Aug 22 '22 at 07:49

score 44 · Answer 3 · edited May 10 '18 at 06:32

44

Another way, is simply add the headers to your route:

router.get('/', function(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); // If needed
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); // If needed
    res.setHeader('Access-Control-Allow-Credentials', true); // If needed

    res.send('cors problem fixed:)');
});

edited May 10 '18 at 06:32

Vasyl Boroviak

5,959
5
51
70

answered Nov 26 '16 at 16:14

Asaf Hananel

7,092
4
24
24

13

`)` of smiley confused me – xkeshav May 20 '17 at 11:41

score 24 · Answer 4 · edited Jul 01 '17 at 13:08

The top answer worked fine for me, except that I needed to whitelist more than one domain.

Also, top answer suffers from the fact that OPTIONS request isn't handled by middleware and you don't get it automatically.

I store whitelisted domains as allowed_origins in Express configuration and put the correct domain according to origin header since Access-Control-Allow-Origin doesn't allow specifying more than one domain.

Here's what I ended up with:

var _ = require('underscore');

function allowCrossDomain(req, res, next) {
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  var origin = req.headers.origin;
  if (_.contains(app.get('allowed_origins'), origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }

  if (req.method === 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
}

app.configure(function () {
  app.use(express.logger());
  app.use(express.bodyParser());
  app.use(allowCrossDomain);
});

Is this the same 'if (app.get('allowed origins').indexOf(origin)!==-1)?'? — Rune Jeppesen, Dec 13 '16 at 21:15

score 15 · Answer 5 · answered Jul 06 '16 at 17:31

The answer code allow only to localhost:8888. This code can't be deployed to the production, or different server and port name.

To get it working for all sources, use this instead:

// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

This does not work for me! " * is not a valid origin ". It seems the * character is not recognized as a wildcard. — Francesco, Sep 29 '16 at 10:19
It works for me. i.e. using wild card '*'. works both for chrome and safari. — Anjan Biswas, Apr 25 '17 at 08:38

score 15 · Answer 6 · answered Aug 29 '18 at 09:21

15

Install cors dependency in your project:

npm i --save cors

Add to your server configuration file the following:

var cors = require('cors');
app.use(cors());

It works for me with 2.8.4 cors version.

answered Aug 29 '18 at 09:21

monikaja

411
3
10

`"cors": "^2.8.5", "express": "^4.16.3",` works fine just with the line @monikaja suggested. Thanks! – RamiroIsBack Nov 27 '18 at 20:05
What this does is to enable all origins/domains to access the app which is something you usually don't want to do. Instead specify just the allowed domains. – LachoTomov Jul 05 '19 at 11:25
After 4-5 hours of searching, this is the only solution that actually works for me. Thanks – ultrageek Jul 14 '20 at 05:45

score 15 · Answer 7 · answered Aug 18 '19 at 14:01

Hi this happens when the front end and backend is running on different ports. The browser blocks the responses from the backend due to the absence on CORS headers. The solution is to make add the CORS headers in the backend request. The easiest way is to use cors npm package.

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

This will enable CORS headers in all your request. For more information you can refer to cors documentation

https://www.npmjs.com/package/cors

score 10 · Answer 8 · answered Dec 15 '18 at 11:31

10

This worked for me.

app.get('/', function (req, res) {

    res.header("Access-Control-Allow-Origin", "*");
    res.send('hello world')
})

You can change * to fit your needs. Hope this can help.

answered Dec 15 '18 at 11:31

dmx

1,862
3
26
48

score 10 · Answer 9 · answered Jan 01 '21 at 17:43

10

All the other answers didn't work for me. (including cors package, or setting headers through middleware)

For socket.io 3^ this worked without any extra packages.

const express = require('express');
const app = express();

const server = require('http').createServer(app);
const io = require('socket.io')(server, {
    cors: {
        origin: "*",
        methods: ["GET", "POST"]
    }
});

answered Jan 01 '21 at 17:43

Gilly

9,212
5
33
36

This is a best reply ever! Worked with socketio. Thanks – Nijat Mursali Jan 26 '21 at 00:03

score 5 · Answer 10 · answered Dec 21 '15 at 12:51

app.all('*', function(req, res,next) {
    /**
     * Response settings
     * @type {Object}
     */
    var responseSettings = {
        "AccessControlAllowOrigin": req.headers.origin,
        "AccessControlAllowHeaders": "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5,  Date, X-Api-Version, X-File-Name",
        "AccessControlAllowMethods": "POST, GET, PUT, DELETE, OPTIONS",
        "AccessControlAllowCredentials": true
    };

    /**
     * Headers
     */
    res.header("Access-Control-Allow-Credentials", responseSettings.AccessControlAllowCredentials);
    res.header("Access-Control-Allow-Origin",  responseSettings.AccessControlAllowOrigin);
    res.header("Access-Control-Allow-Headers", (req.headers['access-control-request-headers']) ? req.headers['access-control-request-headers'] : "x-requested-with");
    res.header("Access-Control-Allow-Methods", (req.headers['access-control-request-method']) ? req.headers['access-control-request-method'] : responseSettings.AccessControlAllowMethods);

    if ('OPTIONS' == req.method) {
        res.send(200);
    }
    else {
        next();
    }


});

Isn't this approach much simpler? https://stackoverflow.com/a/40820322/5035986 — RegarBoy, Oct 09 '21 at 11:18

score 4 · Answer 11 · edited Nov 21 '19 at 23:59

Add following code in app.js of NODEJ Restful api to avoid "Access-Control-Allow-Origin" error in angular 6 or any other framework

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

var cors = require('cors');
var bodyParser = require('body-parser');

//enables cors
app.use(cors({
  'allowedHeaders': ['sessionId', 'Content-Type'],
  'exposedHeaders': ['sessionId'],
  'origin': '*',
  'methods': 'GET,HEAD,PUT,PATCH,POST,DELETE',
  'preflightContinue': false
}));

score 4 · Answer 12 · answered Aug 08 '21 at 05:02

4

You could use cors package to handle it.

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

app.use(cors())

for setting the specific origin

app.use(cors({origin: 'http://localhost:8080'}));

know more

answered Aug 08 '21 at 05:02

MD SHAYON

7,001
45
38

JQuery Guru · Answer 13 · 2013-08-20T10:47:27.090

2

You can use "$http.jsonp"

OR

Below is the work around for chrome for local testing

You need to open your chrome with following command. (Press window+R)

Chrome.exe --allow-file-access-from-files

Note : Your chrome must not be open. When you run this command chrome will open automatically.

If you are entering this command in command prompt then select your chrome installation directory then use this command.

Below script code for open chrome in MAC with "--allow-file-access-from-files"

set chromePath to POSIX path of "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" 
set switch to " --allow-file-access-from-files"
do shell script (quoted form of chromePath) & switch & " > /dev/null 2>&1 &"

second options

You can just use open(1) to add the flags: open -a 'Google Chrome' --args --allow-file-access-from-files

edited Aug 20 '13 at 10:47

answered Aug 19 '13 at 09:30

JQuery Guru

6,943
1
33
40

How about on MAC ?? Chrome.exe --allow-file-access-from-files – user1336103 Aug 19 '13 at 09:38
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-file-access-from-files manage to open chrome but the message is still showing "XMLHttpRequest cannot load http://localhost:3000/. Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin. " – user1336103 Aug 19 '13 at 09:46
+1 I can confirm this works with the Mac option using 'open'. My case is a little different as I'm simply testing a completely downloaded site that accesses some local JSON files. – spong Sep 05 '13 at 03:17

score 1 · Answer 14 · answered Jul 02 '16 at 06:18

/**
 * Allow cross origin to access our /public directory from any site.
 * Make sure this header option is defined before defining of static path to /public directory
 */
expressApp.use('/public',function(req, res, next) {
    res.setHeader("Access-Control-Allow-Origin", "*");
    // Request headers you wish to allow
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // Set to true if you need the website to include cookies in the requests sent
    res.setHeader('Access-Control-Allow-Credentials', true);
    // Pass to next layer of middleware
    next();
});


/**
 * Server is about set up. Now track for css/js/images request from the 
 * browser directly. Send static resources from "./public" directory. 
 */
expressApp.use('/public', express.static(path.join(__dirname, 'public')));

If you want to set Access-Control-Allow-Origin to a specific static directory you can set the following.

score 1 · Answer 15 · answered Jul 03 '20 at 19:34

Apart from all listed answers, I had the same error

I have both access to frontend and backend, I already added cors module app.use(cors()); Still, I was struggling with this error.

After some debugging, I found the issue. When I upload a media which size was more than 1 MB then the error was thrown by Nginx server

<html>

<head>
    <title>413 Request Entity Too Large</title>
</head>

<body>
    <center>
        <h1>413 Request Entity Too Large</h1>
    </center>
    <hr>
    <center>nginx/1.18.0</center>
</body>

</html>

But in the console of frontend, I found the error

Access to XMLHttpRequest at 'https://api.yourbackend.com' from origin 'https://web.yourfromntend.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

So It makes confusion here. But the route cause of this error was from nginx configuration. It's just because the directive client_max_body_size value has been set to 0 by default. It determines what the allowable HTTP request size can be is client_max_body_size. This directive may already be defined in your nginx.conf file located at /etc/nginx/nginx.conf Now you need to add/edit the value of the directive client_max_body_size either at http or server.

server {
    client_max_body_size 100M;
    ...
}

Once you have set your desired value, save your changes and reload Nginx: service nginx reload

After these changes, It's working well

REFERENCE: https://www.keycdn.com/support/413-request-entity-too-large#:~:text=%23,processed%20by%20the%20web%20server.&text=An%20example%20request%2C%20that%20may,e.g.%20a%20large%20media%20file).

score 0 · Answer 16 · answered Sep 13 '22 at 13:42

We'll see if the top 2 answers accept my edit, but it's very likely you're gonna have to either add or use 127.0.0.1 instead of localhost.

With the cors package, you're even able to use more than one allowed origin:

app.use(
  cors({ origin: ["http://localhost:8888", "http://127.0.0.1:8888"] })
);

And you could use origin: "*" if you wish to allow for anything.

For more info, do check out Web Dev Simplified's tutorial.

No 'Access-Control-Allow-Origin' - Node / Apache Port Issue

Angular code

HTML

16 Answers16

Linked

Related