I'm running a React frontend and a Flask backend. I don't understand anything.
Let's talk CORS. CORS is Cross-Origin Resource Sharing. So why does Chrome complain about CORS when I'm running both my frontend and my backend on the same host?
So I enable CORS on my Flask backend, and continue on my merry way.
I'm not stupid so I'm like, how do I keep my user's data if they accidentally refresh or close the page? Well luckily Flask has cookies built in with session. So I go ahead and store the important things in session, and in componentDidMount, I try to fetch some important things. But after refreshing, Flask forgets the session, and my fetch returns no useful data.
I tried to look this up for a while, and I see interesting looking things, like the credentials parameter to fetch. If I write in {credentials: "include"}
, according to the docs:
Always send user credentials (cookies, basic http auth, etc..), even for cross-origin calls.
So ostensibly, this should solve my problem and somewhat resolve my confusion, but, of course, no such luck:
Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access.
Please, help me understand what's happening, and how I can fix it.
I'll keep doing my research.