I recently tried to implement a nodejs api. It works very well on localhost, however, I went up to production using several different services, in all of them the same problem happened:
My api returns correctly in the browser,** but it doesn't work calling in the frontend or by postman**... I've already added all possible headers and nothing works, I suspected it was because it wasn't a secure connection (https), but even disabling it in the browser, still not working... someone help me please?
added headers on api:
res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization"); res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); res.header("Accept", "application/json"); res.header("Referrer-Policy","no-referrer")
added headers on frontend:
Accept: 'application/json', 'Content-Type': 'application/json',
Related
I'm making and API with expressjs, when i make a request with postman it works and i get response, but when i do it with navigator it doesn't work, even i have enabled cors
This is the request with postman
This is the request with browser
I added access origin to my code
And I added cors
I tried with other browsers but the problem still the same.
Try following:
app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, authorization");
res.setHeader("Access-Control-Allow-Methods", "GET, PATCH, POST, DELETE, PUT, OPTIONS");
next();
});
The problem is the port you are using (6000)
port 6000 is officialy reserved to TCP
Just change the port to an unreserved one and it will work (in my case I changed to 5000)
I'm not 100% sure about it, but the reason it works on postman and doesn't on browser it's problably because the browser actually expects the 6000 port to be exclusive to TCP, while postman doesn't.
link with full list of reserved ports
Since Chrome 85, this error occurs when my front (localhost:8080) send a request to my back (localhost:3000, node app) : 'has been blocked by CORS policy: Cannot parse Access-Control-Allow-Headers response header field in preflight response'
And after playing with my CORS policy in my back, it reveals that when I remove headers with a '/' or a '=', everything works well.
Exemple :
// does not work
res.header(
'Access-Control-Allow-Headers',
'Content-Type, Authorization, Content-Length, application/json, charset=utf-8, X-Requested-With'
)
// works well
res.header(
'Access-Control-Allow-Headers',
'Content-Type, Authorization, Content-Lengths, X-Requested-With'
)
And I do not understand the why.
NB : I read https://www.chromium.org/Home/chromium-security/extension-content-script-fetches, I guess it has something to do with my issue but I still could not manage to fix it.
This question already has an answer here:
CORS Error: “requests are only supported for protocol schemes: http…” etc
(1 answer)
Closed 3 years ago.
SOLUTION: It turns out I needed to change https://localhost:3000, to http://localhost:3000. (My follow-up question would be why this is the case, especially as my code worked for https://www.remoteserver.com/`).
I have a development server at https://localhost:3000 and a production server at https://www.remoteserver.com (Node.js/Express). My client is at https://localhost:4200 (Angular).
I fixed the Cross-Origin Request Blocked issue with https://www.remoteserver.com, using the code as below:
var cors = require(cors());
app.use(cors());
app.options('*',cors());
var allowCrossDomain = function(req,res,next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
}
app.use(allowCrossDomain);
But using the same code for my development server https://localhost:3000 I am still facing the CORS blocked issue, and I haven't been able to get rid of the problem.
Is there any reason that the code above would work for the production server but not for the development server?
Any ideas on a fix or what I should try next?
Many thanks!
The three solutions, avoiding CORS problem
Allow CORS to server side
Use proxy server
Use JSONP
Try to use as the following way
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "GET, PUT, POST");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Get know details link
I am making a put request from safari which is giving CORS issue i.e
Failed to load resource: Method PUT is not allowed by Access-Control-Allow-Methods.
But it is working fine in chrome, you can see my response header and please help me if i am working something wrong
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Methods", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With ,allow-access");
I just replace res.header("Access-Control-Allow-Methods", "*"); with res.header("Access-Control-Allow-Methods", "PUT"); and it's working fine, still have a doubt what is the problem with the '*'.
I was facing the same issue. Turns out server had Access-Control-Allow-Methods response header's value is set to *. It had to explicitly set to allow methods instead of a wildcard as it is not supported by a safari in iOS as given here in this MDN doc.
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods
I've set up a Node.js (TypeScript hosted on Google Cloud Platform [GCP]) app for CORS but I'm still getting errors (Origin is not allowed by Access-Control-Allow-Origin) on mobile--desktop works fine.
I've searched but there are so many questions about getting this set up in general, I can't find why it specifically isn't working for mobile.
this.app.use(cors());
this.app.options('*', cors());
...
router.use(function(req, res, next) {
res.header('Content-Type', 'application/json');
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'DELETE,GET,OPTIONS,PATCH,POST');
res.setHeader('Access-Control-Allow-Headers', 'Origin, Accept, Authorization, Content-Type, X-Requested-With, Access-Control-Allow-Headers, Access-Control-Request-Method, Access-Control-Request-Headers');
next();
});
BTW The errors don't appear in the console until a few minutes after the page has loaded. (I've removed the URLs which are valid.)
"XMLHttpRequest cannot load due to access control checks."
"Failed to load resource: Origin is not allowed by Access-Control-Allow-Origin."
The issue was missing data in the DB, so the Node endpoint was not returning properly. The errors had nothing to do with the problem.