REACT Frontend not talking to backend despite Flask-CORS
Question
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))
}, []);
1 answers
solution1
0 2022-05-02 20:08:07
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.