cors working on localhost but not on production

Question

I'm having a strange issue with express cors. My Cors config works fine on localhost but it isn't working on the production. I'm always getting this error.

Failed to load https://my-movie-db-backend-roberto.herokuapp.com/auth/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://my-movie-db-roberto.herokuapp.com' is therefore not allowed access. The response had HTTP status code 503. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is my cors configuration:

import * as cors from "cors";
const corsConfig: cors.CorsOptions = {
    origin: ["https://my-movie-db-roberto.herokuapp.com", "http://localhost:3000"],
    credentials: true,
    methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE"
};

app.use(cors(corsConfig));

// add your routes
<MY-Routes>

// enabling pre-flight
app.options("*", cors(corsConfig));

I have been around this for some time now and I decide that it would be better ask for help, thanks ;-)

Change `"GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE"` to array `["GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE"]` — Ankit Agarwal, Feb 21 '18 at 14:24
The isn't the problem. The documentation allows setting the methods like a string. But I tried the array approach and the error persists — Robert, Feb 21 '18 at 15:36
*"The response had HTTP status code 503"* fix that. It may not even be related to your express server at all. — Kevin B, Feb 21 '18 at 16:23

geekonaut · Answer 1 · 2018-02-21T17:09:22.170

I tried to replicate the setup and found that the cors library seems to not send the Access-Control-Allow-Origin header if the origin is not on the list of allowed origins.

So make sure you don't have any typos in the entries for that option or try with "*" first and then refine in a second step.

Here is the code I'm using:

Server side

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

const app = express()

const corsConfig = {
    origin: ["http://testing.local", "https://my-movie-db-roberto.herokuapp.com", "http://localhost:3000"],
    credentials: true,
    methods: "GET,HEAD,OPTIONS,PUT,PATCH,POST,DELETE",
    allowedHeaders: ['Content-Type']
};

app.use(cors(corsConfig));
enter code here

// add your routes
app.post('/', (req, res) => res.send('yay'));

// enabling pre-flight
app.options("*", cors(corsConfig));
app.listen(8080, () => console.log('serving...'))

Client (http://testing.local):

fetch('http://localhost:8080/', {
  method: 'POST', 
  headers: { 'Content-Type': 'application/json' }
})
.then(r => r.text())
.then(console.log)

score 0 · Answer 2 · answered Feb 21 '18 at 18:28

Apparently the problem it wasn't on the cors at all. The backend server it was offline due to some missing packages that were considered dev dependencies and Heroku didn't installed them. Just change the isProduction flag on Heroku and all works fine now.

cors working on localhost but not on production

2 Answers2