Question 355193 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Difficulties with Axios – Cors setup in React – Flask project

im facing some problems while setting up the authentication functionality of my react – flask application.

This is what my headers look like and what the error says.

I am running server sided sessions that i am using redis for.
After the POST request i want to return a cookie in the future, because of that i need Credentials to be true.

Thats my frontend:

httpClient

post request

And the backend:

Both versions dont work.

Axios is installed and flask-cors as well.

I already spent a view hours in trying to solve this problem mostly in vary with the post() headers and/or the CORS() settings but this is still what gave me the most promising result.

I also did read a lot of posts about this topic but couldn’t find a solution.

Thank you very much and any advice will be appreciated very much.

Tags:

2

Answers


  1. 0

    you need to add CORS preflight by OPTIONS method reply in backend other than access control headers.

    res.setHeader('Access-Control-Allow-Origin', '*',);
res.setHeader('Access-Control-Allow-Headers', 'Content-Type,Mode,access-control-allow-origin');
res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,PATCH,DELETE');
res.setHeader('Access-Control-Allow-Credentials', true);

if (req.method === 'OPTIONS') {
  return res.end()
}
    Login or Signup to reply.
  2. 0

    My experience is that

    you should add a reverse proxy in the frontend, even though the flask is configured.

    I got a similar problem and the cors problem comes from browser, it seems your frontend is in localhost:3000, and the backend is in localhost:5000, you send the request directly to the backend like localhost:5000/user/login in your error picture which is the cause.

    you should send all the request to a temp endpoint like localhost:5000/api/xxx, then the proxy send the request to localhost:3000/xxx, that’s the reverse proxy thing.

    I am using webpack, for local development, this is my configure, and this do the exactly thing I have mentioned

    devServer: {
      static: './dist',
      port: 7789,
      historyApiFallback: true,
      proxy: {
        '/api': {
          target: env.BACKEND_URL,
          pathRewrite: {
            '^/api': '',
          },
        },
        secure: false,
      },
    },

    I believe other bundle tools like vite should have similar configurations

    Before:

    localhost:3000 -> localhost:5000

    Now:

    localhost:3000 -> localhost:3000/api(reverse proxy) -> localhost:5000

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search