30 replies

My life has been blocked by CORS policy: Response to preflight request doesn't pass access

Who doesn't like a bit of monday morning cors?

Was hoping that someone could help me narrow down my issue if they've got a sec.

I've a FE and BE server, FE using axios, BE express. Locally, the FE is on port 4600, backend 3550, and there doesn't seem to be an issue. I'd thought that was because I'd set the correct headers on the server:

module.exports = (app) => {
  app.use((req, res, next) => {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4600');
      res.setHeader('Access-Control-Allow-Credentials', 'true');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Authorization, Accept');
      res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
      next();
  })
};

module.exports = (app) => {
  app.use((req, res, next) => {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4600');
      res.setHeader('Access-Control-Allow-Credentials', 'true');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Authorization, Accept');
      res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
      next();
  })
};

Changing the allowed origin to something incorrect, say 4700, results in the error I'd expect:

The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4700' that is not equal to the supplied origin.

The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4700' that is not equal to the supplied origin.

So all of the above is working as far as I can tell. The problem comes when I upload the sites:
FE:

example.com

example.com

,
BE:

api.example.com

api.example.com

.

Both are accessible, so for example, navigating to

api.example.com/email

api.example.com/email

will return json from a test route. However, the request that had previously worked locally now returns

Access to XMLHttpRequest at 'https://api.example.com/email/' from origin 'https://example.com' 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.

Access to XMLHttpRequest at 'https://api.example.com/email/' from origin 'https://example.com' 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.

What I guess I don't understand is why locally the header is obviously present and being used (which is why it denied access when the port was changed to 4700), but when live it complains it isn't.

I was hoping someone had some debugging pointers please!

KP-C

Kevin Powell - Community•4y ago•

30 replies

JWode

My life has been blocked by CORS policy: Response to preflight request doesn't pass access

Who doesn't like a bit of monday morning cors?

module.exports = (app) => {
  app.use((req, res, next) => {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4600');
      res.setHeader('Access-Control-Allow-Credentials', 'true');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Authorization, Accept');
      res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
      next();
  })
};

module.exports = (app) => {
  app.use((req, res, next) => {
      res.setHeader('Access-Control-Allow-Origin', 'http://localhost:4600');
      res.setHeader('Access-Control-Allow-Credentials', 'true');
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Authorization, Accept');
      res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
      next();
  })
};

Changing the allowed origin to something incorrect, say 4700, results in the error I'd expect:

The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4700' that is not equal to the supplied origin.

The 'Access-Control-Allow-Origin' header has a value 'http://localhost:4700' that is not equal to the supplied origin.

So all of the above is working as far as I can tell. The problem comes when I upload the sites:
FE:

example.com

example.com

,
BE:

api.example.com

api.example.com

.

Both are accessible, so for example, navigating to

api.example.com/email

api.example.com/email

will return json from a test route. However, the request that had previously worked locally now returns

Access to XMLHttpRequest at 'https://api.example.com/email/' from origin 'https://example.com' 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.

Access to XMLHttpRequest at 'https://api.example.com/email/' from origin 'https://example.com' 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.

My life has been blocked by CORS policy: Response to preflight request doesn't pass access

My life has been blocked by CORS policy: Response to preflight request doesn't pass access

Similar Threads

Similar Threads

Similar Threads