CODEWITHSUNDEEP
node.jsheroku
user9448861
user9448861

Reputation:

Issue with CORS when sending a get request to external API in - NodeJS / heroku

I have an app built in 'Angular/NodeJs' that using heroku server. In the app i have a option to search for a movies in 'omdbapi' .Everything works great until i preforming a search, the console giving me the next error:

enter image description here

When i turn on my CORS extension in chrome it working great.

Can someone please suggest me what is the problem.

node code 

const express      = require('express');
const bodyParser   = require('body-parser');
const mongoose     = require('mongoose');
const app          = express();
const path         = require('path');
const compression  = require('compression');
const port         = process.env.PORT || 8000;
const cors         = require('cors')

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

app.use(compression());
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use("/images", express.static(path.join(__dirname, "images")));
app.use("/", express.static(path.join(__dirname, "angular")));

app.use((req, res, next) => {
    res.sendFile(path.join(__dirname, "angular", "index.html"));
});


app.listen(port, () => {
    console.log("App is running on port " + port);

[Edit] Still dot working after changing the header to @jbarros suggestion. 

const express      = require('express');
const bodyParser   = require('body-parser');
const mongoose     = require('mongoose');
const app          = express();
const path         = require('path');
const compression  = require('compression');
const port         = process.env.PORT || 8000;

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", '*');
    res.header("Access-Control-Allow-Credentials", true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
    res.header("Access-Control-Allow-Headers", 'Authorization, Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
    next();
});

Angular get function

  getMoviesByName(movieName: string) {
    const url = 'https://www.omdbapi.com/?s=' + movieName + '&apikey=xxxxxxx&type=movie'
    return this.http.get<{Search: ImportedMovieModal[]}>(url)
  }

Upvotes: 2

Views: 1474

Answers (1)

jbarros
jbarros

Reputation: 638

You are not allowing the Authorization header in Access-Control-Allow-Headers. So add the header:

Change:

res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');

For:

res.header("Access-Control-Allow-Headers", 'Authorization, Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');

Also, you probably need to intercept the OPTIONS method to send an HTTP ok status, so:

Change your:

next()

For:

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

And re-deploy it to Heroku.

Upvotes: 1

Related Questions