Enable CORS in NodeJS

Question

I have this code below which is my app.js in my node server currently my website has some CORS issue when downloading the canvas with HTML2Canvas. But i'm not sure why even after adding the CORS header it still doesn't work, Am i doing something wrong in my code below? Any help would be greatly appreciated thank you.

const express = require('express');
const cors = require('cors')
const path = require('path');
const bodyParser = require('body-parser')

const app = express();

app.options('/home', cors()) 

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))

// parse application/json
app.use(bodyParser.json())

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

app.get('/', function(req, res){
    res.render('index');
})
app.get('/home', function(req, res){
    res.render('home');
})

app.listen(3000, function(){
    console.log('Server started on port 3000...');
});

You may like to give a try https://www.npmjs.com/package/cors module — Arif Khan, Aug 06 '18 at 09:02
@ArifKhan i tried adding that but it still doesn't work and there's no error — Best Jeanist, Aug 06 '18 at 09:03
Possible duplicate of [How to allow CORS?](https://stackoverflow.com/questions/7067966/how-to-allow-cors) — t3__rry, Aug 06 '18 at 09:04
"it still doesn't work" — What does this mean? Exactly what error message do you get? — Quentin, Aug 06 '18 at 09:09
@Tommy — If there is no error, why do you think it is a CORS problem? CORS problems always produce error messages (unless the problem is that your *client* is configured to not use CORS, which I don't think is possible for canvas related issues) — Quentin, Aug 06 '18 at 09:10
@Quentin This is the error i get after adding this `useCORS: true` to my download function `Access to Image at '//link' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.` — Best Jeanist, Aug 06 '18 at 09:15

score 0 · Answer 1 · answered Aug 06 '18 at 09:03

0

You can install expressjs/cors and simply write your server like this:

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

const app = express();

app.use(cors());

It'll add required headers for you.

CORS Pre-flight

And if you've already add headers, and somehow it stills not work, maybe you should enable CORS preflight.

Take a further look at CORS Pre-flight here.

answered Aug 06 '18 at 09:03

NoobTW

2,466
2
24
42

Can you take alook at my updated codes? i have changed it but still no luck – Best Jeanist Aug 06 '18 at 09:10
If it's still wrong, you can copy or take a screenshot of your error log. – NoobTW Aug 06 '18 at 09:11

score 0 · Answer 2 · answered Aug 06 '18 at 09:17

Access to Image at '//link' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

You have configured CORS backwards.

You are trying to load an image from //link (clearly not a real URL but I'm assuming you have obfuscated it), but you have configured CORS on http://localhost:3000.

CORS permission must be granted by the server you are loading the data from.

You can't grant your own code permission to read data that a different server is willing to share with the owner of the browser.

Otherwise, Malery, who runs evil-hacker.example.com could use CORS to give her JS permission to read data sent to visitor's browsers from gmail.com. That would be a massive security problem!

the image i'm loading is from amazonaws so theres completely no way of being able to download that image just by adding this cors npm? — Best Jeanist, Aug 06 '18 at 09:23
@Tommy — Depends on which bit of AWS you are using. You can run Node there, so it is *possible*. You are probably talking about S3, in which case, no, you can't use the Node module. You would have to use an S3 compatible way of configuring CORS. [Amazon's official documentation on how to do that is the first hit when I search Google for S3 CORS](https://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html). — Quentin, Aug 06 '18 at 09:26

Enable CORS in NodeJS

2 Answers2

CORS Pre-flight