Nodejs express, Heroku CORS

Question

The server side of my app was built using Node with express,

It was working fine locally, but now I've uploaded to Heroku

I'm getting CORS errors, even though I've handled it within the app

index.js

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

var http = require('http');
var path = require('path');
var twit = require('twitter');
var app = express();
var port = process.env.PORT || 3000;

var twitter = new twit({
  consumer_key:  'myKey',
  consumer_secret: 'mySecret',
  access_token_key: 'myKey',
  access_token_secret: 'mySecret'
});
app.set('port', (port));
var server = http.createServer(app).listen(port, function() {
  console.log('Server listening on port ' + port);
});
app.use(bodyParser.urlencoded({extended: true}));

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PATCH, DELETE, OPTIONS');
    next();
});

app.get('/gettweets', function (req, res) {
  twitter.get('statuses/user_timeline', { id: 23445555, count: 3 }, function(err, tweets, response) {
      if (!err) {
         res.json(tweets);
      }
      else {
        return res.status(500).json({
          title: 'An error has occured',
          error: err
        })
      }
    })
})

And in my http call

export class SocialService {

  private url = 'https://myserver.herokuapp.com/';
  constructor(private http: Http) { }

  initialise(){
    var headers = new Headers();
        headers.append('Content-Type', 'application/json');

    return this.http.get(this.url+'gettweets', {headers: headers})
        .map((response: Response) => {
        console.log(response.json());
          return response.json();
        })
        .catch((error: Response) =>  Observable.throw(error.json()) )

  }

}

And the build log from Heroku

-----> Node.js app detected
-----> Creating runtime environment

       NPM_CONFIG_LOGLEVEL=error
       NPM_CONFIG_PRODUCTION=true
       NODE_VERBOSE=false
       NODE_ENV=production
       NODE_MODULES_CACHE=true
-----> Installing binaries
       engines.node (package.json):  unspecified
       engines.npm (package.json):   unspecified (use default)

       Resolving node version 6.x via semver.io...
       Downloading and installing node 6.10.3...
       Using default npm version: 3.10.10
-----> Restoring cache
       Loading 2 from cacheDirectories (default):
       - node_modules
       - bower_components (not cached - skipping)
-----> Building dependencies
       Installing node modules (package.json)
-----> Caching build
       Clearing previous node cache
       Saving 2 cacheDirectories (default):
       - node_modules
       - bower_components (nothing to cache)
-----> Build succeeded!
-----> Discovering process types
       Procfile declares types     -> (none)
       Default types for buildpack -> web
-----> Compressing...
       Done: 17.8M
-----> Launching...
       Released v5
       https://myserver.herokuapp.com/ deployed to Heroku

And error in Browser

XMLHttpRequest cannot load https://myserver.herokuapp.com/gettweets.
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 503.

This is the error I'm getting from Heroku, something to do with the path I'm requesting

2017-05-11T12:54:05.960151+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=OPTIONS path="/gettweets" host=maleonserver.herokuapp.com request_id=5c052790-67df-4677-be8b-14cc2bc71292 fwd="5.67.244.130" dyno= connect= service= status=503 bytes= protocol=https

Solution 1

Hi I worked out that it was due to Heroku will only install packeges from your dependancies

And what I needed was in my devDependencies, so once I reinstalled as dependancies it worked!

Solution 2

Try to also allow the credentials:

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();
});

Edit:

Also if you want to make a local http call in your heroku app; change

private url = 'https://myserver.herokuapp.com/';

to

private url = '/';

Solution 3

another possible cause is missing .env variables. When deploying a heroku server, all .env variables have to be set via heroku's config vars.

If the route required a missing .env, for some reason it returns as a CORS error.

In my case, the jsonwebtoken was looking for process.env.secretkey, so all routes that called for the jsonwebtoken returned with CORS error, while routes that does not require it worked just fine.

Solution 4

I was having the same issue. I was getting cors error on Heroku. The reason was that my server was producing some errors on Heroku. Checked my application log on Heroku found out that there was an error of production env variable not defined. So I defined my env variable and bingo! there was no further cors error.

View more solutions

Comments

[robertklep]

They seem to be testing to see if CORS works by requesting cross-domain (the origin is http://localhost:4200).

[eko]

@robertklep oh you mean OP is trying to make a request from the local app to the one deployed on heroku?

[robertklep]

Yes, that's what it looks like to me :D

[RasMason]

Yes that's right I'm trying to access it from local host, I added the credentials part but still nothing, also updated question

[David R]

@Roy Just curious to know, The solution provided here worked for you?

[eko]

@Roy if the repo is deployed on github can you share the link?

[RasMason]

@echonax Thanks, github.com/royadams72/maleon I'm only uploading what's in the server folder