reactjsexpressaxiosuse-effecthttp-status-code-503

Axios request blocked regardless of CORS settings - 503 error


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

Solution

  • 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