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
Related
I have an Azure static web app running my frontend and an Azure web app running my backend. I've been using this app for a couple of months. Today, after deploying some changes, my backend has been responding with CORS errors. Specifically, the error is:
Access to XMLHttpRequest at 'https://memoriesforusbe.azurewebsites.net/auth?userEmail=xxxxxxxxxxxxxxx&userPassword=xxxxxxxxxxxxx' from origin 'https://www.memoriesforus.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
UPDATE: I did some more testing this morning and have found that the response is different depending on the user. This makes NO sense to me that a CORS response is based on the data being sent in? More confused than before.
The headers that I had in my node.js server file were:
res.header("Access-Control-Allow-Origin", "https://login.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://www.memoriesforus.com");
To try to fix it, I added the following in hopes the wildcard might help.
res.header("Access-Control-Allow-Origin", "https://*.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://memoriesforus.com");
I also noticed that Azure Web Apps has a blade for CORS. I tried adding my headers there and had the same result.
The error occurred on the login screen of the app. I have a couple of apis that don't require the user to be logged in or use tokens. So I tried those and they seem to be working. So I'm thinking it may have something to do with that?
I'm just very confused because the original request headers worked for so long. Is there something else I should be looking at that might cause this error? The changes I made in the backend were unrelated to CORS. Not sure if something changed on the app service? I also uploaded changes to the frontend. But the call to the api that is getting the error was also unchanged.
The whole CORS related section of the node.js server file currently looks like this:
app.use((req, res, next) => {
res.header("Access-Control-Allow-Origin", "https://login.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://www.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://*.memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://memoriesforus.com");
res.header("Access-Control-Allow-Origin", "https://salmon-plant-09df42110.2.azurestaticapps.net"); //the auto generated name of the frontend on Azure
if(process.env.SERVER_STATUS === 'Dev' ) {
res.header("Access-Control-Allow-Origin", "*"); }
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
if (req.method === "OPTIONS") {
res.header("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
return res.status(200).json({});
}
next();
});
You may have zero or one Access-Control-Allow-Origin headers. You can't have two or more.
The * character is a special value meaning "any origin", it isn't a placeholder that can be included in the allowed origin as a wildcard for part of the origin.
To allow multiple, but not all, origins you need to:
Read the Origin request header
Compare it to whatever rules you care to write to see if it is an allowed origin
Include res.header("Access-Control-Allow-Origin", the_origin_request_header_value); if it is one
You appear to be using Express, if so the cors module will handle this for you (and allow you to specify valid origins as a list, a regular expression, or a custom function).
I found this article which ended with the problem being the data. So I created a new user and tried with that user. The api works fine. So I will close this question and work on why my data is giving a CORS error. Never occurred to me that it could be the data itself.
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
I am in a team doing a client-server application. We are using Node.js (v12.18) in the backend as an API, and React (v16.13) for the frontend. Recently I've found this bug related to the CORS policy. I'm trying to send a POST request, deleting one resource in the database and when trying to delete it, this is the error I get:
Access to fetch at 'http://localhost:8080/clientes/eliminar' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
As far as I researched in forums and discussions I always find the same resolution, which is using the "Access-Control-Allow" headers, but we are already using them. I tried to change the POST method by a DELETE method when doing the request, but I find the same issue.
The headers that we are currently using in the backend, in case someone wonders what we have.
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, POST");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, token");
next();
});
The sites I visited in order to solve the problem were pretty much the same as this one
TYSM for reading until here and ask for more information you need. Every piece of help is appreciated.
Have you already tried to add CORS to the project and use it as a middleware?
//...
const cors = require('cors')
//...
app.use(cors())
I have a mp4 file that it could be played in chrome but not in IE. When I check IE it shows
MEDIA12899: AUDIO/VIDEO: Unknown MIME type.
error. There are many similar questions here but none of them point to nodejs server. apparently, when I am in the first page of the site where it has views rendering, images, css, js and mp4 I need to identify the mimetype of all such files in get('\' (req,res) middleware. But I have no idea how to do it to solve this problem in IE.
UPDATE:
I have noticed that in the first time when I reload the IE page I get access denied and after that always I get "MEDIA12899: AUDIO/VIDEO: Unknown MIME type." error.
The video that I use in the page is an external resource. I moved it in to my local and surprisingly it could be loaded by IE. After some research I found the problem is related to CORS.
I added the following middleware but still I could not load the external video resource via IE ...
app.use((req,res,next)=>{
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Methods","ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL");
res.header("Access-Control-Allow-Headers","Overwrite, Destination, Content-Type, Depth, User-Agent, Translate, Range, Content-Range, Timeout, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, Location, Lock-Token, If");
res.header("Access-Control-Expose-Headers","DAV, content-length, Allow");
next();
});
I'm trying to go from Domain 1 using AS3 to hit Domain 2 running node.js/express
When I do
var request:URLRequest = new URLRequest(url);
request.method = URLRequestMethod.POST;
It tries to hit [url]/crossdomain.xml and gets a 404.
On the node.js server, running express, it returns the CORS stuff in the header, not as a stand-alone file on a specific route, like so:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});
Is there anything I can do, besides putting the CORS file at /crossdomain.xml, that will enable AS3 to recognize the permissions being returned in the header?
No, there is no way. You need crossdomain.xml at the root of your domain.
Can AS3 recognize the CORS permissions from the header?
Yes.