skip to Main Content

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

2

Answers


  1. Chosen as BEST ANSWER

    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.


    • 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:

    1. Read the Origin request header
    2. Compare it to whatever rules you care to write to see if it is an allowed origin
    3. 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).

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search