[FIXED] Error: Access to XMLHttpRequest has been blocked by CORS policy Flask API + NodeJs

Issue

I have a problem between frontend backend and Flask API.

To execute my project I do `npm start. This will run the ReactJs frontend dev server on port 3000.

In package.json

I added the following "proxy": "http://localhost:5000",

Next, I do

cd backend && python server.py after activating my venv

This will run the Flask API on port 5000

The Flask API has this route

from flask_cors import cross_origin
# File download Link
@app.route('/filePath', methods=['POST'])
@cross_origin()
def get_path():
    data = request.get_json()["path"]
    storage.child(f"files/{data}").download(f"files/Resume.pdf")
    return "Success.."

Finally, in another shell I do

cd backend && node server.js running on port 8080

Which has the following post

app.post('/insert', async (req, response) => {
    const mobile_number = req.body.college_name
    const name = req.body.college_name
    axios.get('http://localhost:3000/details').then(async (res) => {
        const recruit = new RecruitModel({
            mobile_number:res.data.mobile_number, name:res.data.name,
            });
        await recruit.save()
        response.send("inserted data")
      });
});

Here is where the error happens in the frontend.

const uploadFiles = (file) => {
      //
      if (!file) return;
      if (!initialData) return null;
      const storageRef = ref(storage, `files/${file.name}`);
      const uploadTask = uploadBytesResumable(storageRef, file);
  
      uploadTask.on(
        "state_changed",
        (snapshot) => {
          const prog = Math.round(
            (snapshot.bytesTransferred / snapshot.totalBytes) * 100
          );
          setProgress(prog);
        },
        (error) => console.log(error),
        () => {
          getDownloadURL(uploadTask.snapshot.ref).then(async () => {
            console.log(file.name);
            await axios.post('http://localhost:5000/filePath', {
              'path': file.name
            }).then(() => console.log(file.name));
            update();
          });
        }
      );
    };

In await axios.post('http://localhost:5000/filePath' I'm assuming.

I get the following error:

Access to XMLHttpRequest at 'http://localhost:8080/insert' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The 'Access-Control-Allow-Origin' header has a value 'http://localhost:5000' that is not equal to the supplied origin

I thought using flask-cors would fix this so I'm not sure why I'm getting this error.

I'm really struggling on this error, Any suggestions please?

EDIT

  const addRecruit = () => {
    axios.post("http://localhost:8080/insert", {
          college_name:initialData.college_name,
          email:initialData.email, 
          mobile_number:initialData.mobile_number, name:initialData.name
    });
  }

This is where the issue is happening. Because the data is being fetched between Flask and ReactJs but this /insert is in server.js

Solution

The EDIT made things clear, the issue isn't to do with your Flask api. You need to enable cors in server.js

I'm assuming you had this setup before,

const cors = require('cors');
app.use(cors());

Do this instead

const corsOptions ={
    origin:'http://localhost:3000', 
    credentials:true,            //access-control-allow-credentials:true
    optionSuccessStatus:200
}
app.use(cors(corsOptions));

Don't forget to npm i cors

Answered By - Yasmine Daly