Axios request blocked regardless of CORS settings - 503 error

Question

I've tried just about every suggestion out there to solve a CORS issue (47 different ways to be exact). I'm beginning to think the issue is not on CORS side but in how my axios request is set up. My question is simple: Is it possible my issue is with my axios setup and not with my server side CORS set up?

Error: Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Frontend React

  useEffect(async () => {
      const result = await axios({
        method: "GET",
        withCredentials: true,
        url: "site-backend.herokuapp.com",
      }).then((res) => {
        setMasterUserAccount(res.data.username);
      });
    }, []);

Backend Express/Node: CORS

    const cors = require("cors");
    
    var corsOptions = {
      methods: ["GET", "POST", "DELETE", "UPDATE", "PUT", "PATCH"],
      origin: "https://site.herokuapp.com",
      optionSuccessStatus: 200,
      credentials: true,
    };
    
    app.use(cors(corsOptions));

Here's the response from the network tab:

Request URL: https://site-backend.herokuapp.com/userData
Request Method: GET
Status Code: 503 
Referrer Policy: strict-origin-when-cross-origin
Cache-Control: no-cache, no-store
Connection: keep-alive
Content-Length: 506
Content-Type: text/html; charset=utf-8
Date: Wed, 31 Aug 2022 16:54:44 GMT
Server: Cowboy
Accept: application/json, text/plain, 
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Host: site-backend.herokuapp.com
Origin: https://site.herokuapp.com
Referer: https://site.herokuapp.com/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site

It'd be handy to include the exact request that's failing, e.g., is it an `OPTIONS` request? — Dave Newton, Aug 31 '22 at 16:17
In your CORS config, is `origin` a valid [Web origin](https://developer.mozilla.org/en-US/docs/Glossary/Origin)? Did you (you shouldn't) include any path in it? — jub0bs, Aug 31 '22 at 16:39
@jub0bs Thanks for the suggestion. Yep it's a valid web origin without any path or trailing / — AndrewLeonardi, Aug 31 '22 at 16:40
It'd be handy to include the exact request that's failing, e.g., the *actual request* as shown in the network tab (as curl or even an image). — Dave Newton, Aug 31 '22 at 16:52
@DaveNewton I added the network tab response. Let me know if that is what you're looking for. Thanks for the help! — AndrewLeonardi, Aug 31 '22 at 16:59
The response details show that the response is a 503 error. Server systems don’t add application-set errors to 5xx responses. So the root problem is whatever’s causing that 503 error on the server side. Any CORS messages on the client side are just a side effect of that. — sideshowbarker, Aug 31 '22 at 17:07
Not sure what is dummy value here and what is the actual value. Does `origin` from the request match `origin` from `corsOptions`? — mbojko, Aug 31 '22 at 17:14
@mbojko Thanks for the suggestion. It does. I've updated the code to match above. — AndrewLeonardi, Aug 31 '22 at 17:19
@AndrewLeonardi As sideshow said the 503 may indicate it's actually *not* a CORS issue, rather a server issue. Are you able to make any *other* requests to the server, via the app/curl/Postman/etc? — Dave Newton, Aug 31 '22 at 17:33
Thanks! Interestingly enough my POST routes work fine and return 200. Somethings happening with this GET route — AndrewLeonardi, Aug 31 '22 at 18:15

AndrewLeonardi · Accepted Answer · 2022-09-05T17:16:53.167

I was finally able to get to the bottom of this. In the GET function above what I was doing was setting a username state. This was failing because even though the user had been authenticated (via passport.js) the req.user was failing, thus causing a 503 and showing the confusing error: "Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"

Thanks for the comments above from Dave & Sideshow explaining that 503 may indicate it's actually not a CORS issue, rather a server issue. I was convinced it was failing to connect to the database/server at all but this was not the case.

My recommendation if facing this issue is to check the route you're hitting and try to determine what could cause it to fail thus throwing a 503.

UPDATE: This ended up being do to a larger underlining issue with third party cookies and Heroku. See the solution here: Cookies Only set in Chrome - not set in Safari, Mobile Chrome, or Mobile Safari

Axios request blocked regardless of CORS settings - 503 error

1 Answers1