Blocked by CORS policy: No 'Access-Control-Allow-Origin'

Alessandra_Saviotti · May 27, 2020, 6:22pm

hi all,
I realize this is a rather common issue but unfortunately I have not been able to resolve it. I have a backendless 5 app, which I interact with without problems from iOS. I have built a web platform using Angular, and the JavaScript library you provide.

Everything works well when working form localhost, but I cannot get this to work when I deploy to Heroku. Just to give you the full picture, I have another backendless app (this time 3), also with an Angular frontend and deployed on Heroku, where everything works without problems with the same configuration.

Can you help or is there any additional information I can provide here to get past this issue? I have tried different things unsuccessfully, not sure if something needs to be configured differently on my backendless app or elsewhere

Thank you for your help

mark-piller · May 27, 2020, 6:23pm

Hi @Alessandra_Saviotti,

See if this will help you:
https://backendless.com/docs/rest/mgmt_cross_origin_requests.html

Regards,
Mark

Alessandra_Saviotti · May 27, 2020, 6:26pm

thank you Mark, I have tried this even though my understanding is that the default (*) would always work as it allows all domains. I have now tried both the default and the exact web address I am using, but both return the same error.

Anything else? I’m stuck here unfortunately, thanks

mark-piller · May 27, 2020, 6:33pm

With CORS the most important part is an HTTP request called OPTIONS. You can see it in the browser’s Network tab. Could you try to gather more information about what the browser sends to Backendless, what it receives back and what’s most importantly what’s missing in the response that results in the API calls being blocked? Once you have these findings, please post here and we will look into it.

Regards,
Mark

Alessandra_Saviotti · May 27, 2020, 6:43pm

thank you Mark, I have modified my server.js to include the access control strings that were supposed to sort this out:

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

mark-piller · May 27, 2020, 6:49pm

Could you check what’s in the actual response for the POST request? I see it says there are 125 bytes in the response, I am curious what it shows.

Alessandra_Saviotti · May 27, 2020, 7:11pm

alright my bad, thank you so much for guiding me towards a solution, via the payload I could see that there was an error in the API KEY used, which was not set correctly for production (but only for development).

Not sure why the error triggered was something that seemed unrelated but the payload included the correct message, so that the application was not found (due to the wrong key).

All up and running now also in production, thank you again for your time and help