Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource

[rohit_ja]

I am deploying forest admin on Elastic Beanstalk. And I am facing this issue "Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource’. I think it is the cores issue

app.use(function (req, res, next) {
   res.setHeader('Access-Control-Allow-Origin', 'https://app.forestadmin.com');
   res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
   res.setHeader('Access-Control-Allow-Headers', 'Authorization');
   res.setHeader('Access-Control-Allow-Credentials', true);
   next();
});

Than that error is resolved but I am facing unauthorized error.

[rap2h]

Hi @rohit_ja,

that error is resolved but I am facing unauthorized error.

I’m glad the first error was resolved (side question: do you remember what was wrong and how did you fixed it?)

Could you tell me more about this unauthorized error? You could edit your post by adding maybe:

• The full error message
• Your backend logs
• A screenshot of the error in UI if any

[rohit_ja]

I fixed the first error using this code:

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

[rohit_ja]

But Now Whenever my API is called than in request Authorization token is not present.I don’t know why is this happened

[Steve_Bunlon]

Hello @rohit_ja

For your convenience, when you deploy an app anywhere and need to set CORS, you can use an environment variable called CORS_ORIGINS. In your case you can use CORS_ORIGINS=https://app.forestadmin.com (I don’t know your provider, but setting an env variable can be done either in your remote instance configuration, or using the .env file )

Can you test again using this variable and removing the additional middleware please ?

Keep me in touch

[rohit_ja]

Thanks for the reply but still facing the same issue.
No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://app.forestadmin.com’ is therefore not allowed access. The response had HTTP status code 504.

[Steve_Bunlon]

Hello @rohit_ja

This is strange, may I ask if you did any change to your generated project ?

I’m asking because by default, in the app.js file you should have something like this :

Which is the default and mandatory configuration to get CORS running.

Can you confirm these lines are present ?

[rohit_ja]

yes it is present

[Steve_Bunlon]

Hello @rohit_ja

It is really strange, the code you added (mentioned earlier in the post) should not be necessary if you already have this config.

I tried to curl you remote instance to see if it was responding, it looks like the ssl certificate is not correct (self signed ?)

Also, I’ve seen that you are using EB from Amazon, it might require a little bit of config to get the CORS working properly.

Do you confirm your local project works correctly ?

Steve.

[rohit_ja]

yes it is working proper on my local

[arnaud]

Hi @rohit_ja,

It is honestly hard to help you about your issue.
My understanding is that your CORS issue was supposed to be solved (according to your own response 5 days ago) and then it is not anymore (according to your response 4 days ago).

My feeling is that you should not add custom code for the CORS configuration and keep the Lumber generated default logic.
If you confirm that your project local environment works as expected, as Steve mentioned, it is probably an issue with your Elastic Beanstalk configuration.

Sorry for the silly questions, I am not an expert of AWS:

• Do you have a reverse proxy or load balancer that could reject the Admin API requests?
• Do you have a spot where you can/must configure your CORS in AWS interface?

Thanks you for your help.

[arnaud]

Hi @rohit_ja,

Did you manage to solve your issue?

[johanepic]

This is happening because of the CORS (Cross Origin Resource Sharing) . For every HTTP request to a domain, the browser attaches any HTTP cookies associated with that domain. This is especially useful for authentication, and setting sessions. You are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request.

JSONP ( JSON with Padding ) is a method commonly used to bypass the cross-domain policies in web browsers. You’re on domain example.com , and you want to make a request to domain example.nett . To do so, you need to cross domain boundaries. JSONP is really a simple trick to overcome the XMLHttpRequest same domain policy. So, instead of using XMLHttpRequest we have to use < script > HTML tags, the ones you usually use to load JavaScript files , in order for JavaScript to get data from another domain.

Localhost

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999