CODEWITHSUNDEEP
expressheroku
Floris Meininger
Floris Meininger

Reputation: 1

CORS issues after deploying Express.js API to Heroku

I've tried everything I could find on CORS issues, but I can't seem to solve it. I'm using a React.js app with Express.js API to handle the mailer function. When running it locally I did get CORS issues and solved it like this:

const cors = require('cors')

app
  .use(cors())
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(mailer)

I deployed React app and Express API to Heroku, and suddenly started getting CORS errors again:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://...' is therefore not allowed access. The response had HTTP status code 503.

So I tried several different ways to make it work but none of it helps, some examples:

app
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'https://florismeininger.herokuapp.com');
    res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
      });
  .use(mailer)

app
  .use(cors({origin: 'https://florismeininger.herokuapp.com'}))
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(mailer)

app
  .use(cors({origin: '*'}))
  .use(bodyParser.urlencoded({ extended: true }))
  .use(bodyParser.json())
  .use(mailer)

So it was a 503 error in response to a preflight OPTIONS request. I worked around sending this request by using multipart/form-data and attaching the body:

    var data = new FormData()
    data.append('body',body)

        api.post('/mailer', { attach: body })

Now I'm getting a new POST 503 error and also this error:

Failed to load https://florismeininger-mailer-api.herokuapp.com/mailer: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://florismeininger.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.

I tried using the 'no-cors' mode also but didn't work. Keep getting the No 'Access-Control-Allow-Origin' header is present error.

Upvotes: 0

Views: 2260

Answers (1)

roryhewitt
roryhewitt

Reputation: 4507

If you are getting the 503 in response to a CORS preflight OPTIONS request, then as @sideshowbarker comments, the problem is that the OPTIONS request method probably isn't allowed by your web server (Apache or whatever).

Upvotes: 1

Related Questions