How to correctly configure server and browser to avoid cors errors? Fetch API + Node.js

Question

I was trying to make a simple api call from index.html but I kept getting an error no matter what I did.

From my understanding, the cors errors occur because I am making a call to a different server and I have to allow this in my server.

Since I was getting preflight I read that I needed to implement app.option to allow it to work but this still doesn't work.

I tried a) Setting a cors middleware b) using npm cors library c) setting app.options(), as answered in here

I know that when using Fetch you have to be explicit about every option you choose but I seem to be missing all of them.

I ended up just calling the url in my server than fetching my server /data rout but I would appreciate some help configuring it correctly for future use.

Thank you!

Access to fetch at 'http://services.runescape.com/m=itemdb_oldschool/api/graph/4151.json' from origin 'http://localhost:3002' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Using on client //index.html

    <script>
      fetch('http://services.runescape.com/m=itemdb_oldschool/api/graph/4151.json')
      .then(response => response.json())
      .then(res => console.log(res))
    </script>

//server.js

const express = require('express')
const app = express()
const path = require('path');
const rp = require('request-promise')


const port = 3002
var cors = require('cors')
app.use(cors())
app.options('*', cors()); 
app.get('/', async (req, res) => {
    res.sendFile(path.join(__dirname + '/index.html'));
});

});

app.listen(port, () => console.log(`Example app listening on port ${port}!`))

it must be http://services.runescape.com to wildcard the origin. — Hitmands
– Hitmands, Commented Aug 6, 2019 at 6:44
the cors errors occur because I am making a call to a different server and I have to allow this in my server NO the server is getting called needs to allow who can call it. — arizafar
– arizafar, Commented Aug 6, 2019 at 6:44

Charlie · Accepted Answer · 2019-08-06 07:17:53Z

3

Edit: OP has changed the question based on the answer - but for no avail.

You don't have to set CORS headers manually if you use the cors library.

var cors = require('cors');


app.options('*', cors()); // Enable preflight by using this middle ware before any other route. 
app.use(cors());

And if the CORS should be enabled for a white list of domains, use the following options:

var whitelist = ['http://example1.com', 'http://example2.com']
var corsOptions = {
  origin: function (origin, callback) {
    if (whitelist.indexOf(origin) !== -1) {
      callback(null, true)
    } else {
      callback(new Error('Not allowed by CORS'))
    }
  }
}

edited Aug 6, 2019 at 7:17

answered Aug 6, 2019 at 6:47

Charlie

24k12 gold badges65 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Charlie Over a year ago

Any comment on the bad side of this answer is appreciated.

arizafar Over a year ago

its not the solution of OP's problem also not a good idea to use a wildcard. stackoverflow.com/questions/12001269/…

Charlie Over a year ago

Thanks. But the wildcard here is not allowing all the origins. It enables CORS preflight for all routes.

arizafar Over a year ago

yea, cors with no corsOptions does, now you updated so removing downvote.

Jorde Guevara Over a year ago

appreciate it I made some changes in how the code, unfortunately, I am still getting an error. I removed the options in fetch since I was reading that it is added on the response not the request for allow-origin

|

Collectives™ on Stack Overflow

How to correctly configure server and browser to avoid cors errors? Fetch API + Node.js

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related