'REACT Frontend not talking to backend despite Flask-CORS

I'm writing an application REACT frontend and Flask backend (with Flask-cord installed). When I make a call from the frontend I get an error

Access to fetch at 'http://127.0.0.1:5000/get' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

So I followed this post https://www.arundhaj.com/blog/definitive-guide-to-solve-cors-access-control-allow-origin-python-flask.html and configured my application following the instructions.

If I run

$ curl -v -X OPTIONS -H "Origin: http://127.0.0.1:5000" -H "Access-Control-Request-Method: PUT" -H "Access-Control-Request-Headers: Authorization" http://127.0.0.1:5000

I get this response with the right Access-Control-Allow

  Trying 127.0.0.1:5000...
* Connected to 127.0.0.1 (127.0.0.1) port 5000 (#0)
> OPTIONS / HTTP/1.1
> Host: 127.0.0.1:5000
> User-Agent: curl/7.77.0
> Accept: */*
> Origin: http://127.0.0.1:5000
> Access-Control-Request-Method: PUT
> Access-Control-Request-Headers: Authorization
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 404 NOT FOUND
< Server: Werkzeug/2.1.1 Python/3.10.4
< Date: Sat, 23 Apr 2022 09:36:22 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 232
< Access-Control-Allow-Origin: http://127.0.0.1:5000
< Access-Control-Allow-Headers: Authorization
< Access-Control-Allow-Methods: GET, OPTIONS, POST, PUT

If I run the same on http://127.0.0.1:3000 I get this

    Trying 127.0.0.1:3000...
* Connected to 127.0.0.1 (127.0.0.1) port 3000 (#0)
> OPTIONS / HTTP/1.1
> Host: 127.0.0.1:3000
> User-Agent: curl/7.77.0
> Accept: */*
> Origin: http://127.0.0.1:3000
> Access-Control-Request-Method: PUT
> Access-Control-Request-Headers: Authorization
> 
* Mark bundle as not supporting multiuse
< HTTP/1.1 404 Not Found
< X-Powered-By: Express
< Access-Control-Allow-Origin: *
< Access-Control-Allow-Methods: *
< Access-Control-Allow-Headers: *
< Content-Security-Policy: default-src 'none'
< X-Content-Type-Options: nosniff
< Content-Type: text/html; charset=utf-8
< Content-Length: 143
< Vary: Accept-Encoding
< Date: Sat, 23 Apr 2022 09:50:15 GMT
< Connection: keep-alive
< Keep-Alive: timeout=5
< 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot OPTIONS /</pre>
</body>
</html>
* Connection #0 to host 127.0.0.1 left intact

Of corse if I run the application the same CORS error is popping up. I have the impression that flask-cors is not seen by React.

Here is the flask-cors configuration

api_config = {
    "origins": ["http://127.0.0.1:3000"],
    "methods": ["OPTIONS", "GET", "POST", "PUT"],
    "allow_headers": ['Content-Type', 'Authorization']
}
CORS(app, resources={
    r"/*":api_config 
})

And I have this in my js file

 useEffect(() => {
    fetch("http://127.0.0.1:5000/get", {
      mode: 'cors',
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json",
      },
    })
      .then(resp => resp.json())
      .then(resp => console.log(resp))
      .catch(error => console.log(error))
  }, []);

Solution 1:^[1]

I have this issue from an angular + flask app run with python3.10 in a macOS.

The same app works perfectly when run with python3.8 on ubuntu.

I have to try to run it with a lower version of python in the macOS computer to check wether is the os or the python version.

Happy to hear I am not the only one with this issue, I hope I will come back to you with some news.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'REACT Frontend not talking to backend despite Flask-CORS

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]