403 Forbidden Answer on Flask React simple App

Question

I followed the steps outlined in this tutorial: How to Connect Flask to ReactJS to build a web application with a Flask backend and a React frontend. The Flask server is functioning as expected and successfully displays JSON data.

However, I am encountering a 403 (Forbidden) error when attempting to fetch data via Axios using a GET request to http://localhost:3000/profile.

Below is the relevant section of my App.js file responsible for retrieving the JSON data:

function getData() {
    axios({ method: "GET", url: "/profile" })
        .then((response) => {
            const res = response.data;
            setProfileData({ profile_name: res.name, about_me: res.about });
        })
        .catch((error) => {
            if (error.response) {
                console.log(error.response);
                console.log(error.response.status);
                console.log(error.response.headers);
            }
        });
} //end of new line

Interestingly, when I replicated the exact infrastructure on a different computer, it worked without any issues. I've considered potential authorization issues, but it seems unusual for a localhost website. Additionally, I've adjusted folder permissions using chmod 777 to rule out any access-related problems. I'm seeking assistance in identifying the root cause of this discrepancy or guidance on where to look for potential issues.

Thanks a lot,

Francois

Answer 1

As I currently lack the reputation to comment, I'm sharing my observations as an answer. Given the description of a 403 error occurring in your Flask app when receiving a request from the React app, it suggests a potential CORS (Cross-Origin Resource Sharing) issue.

To delve deeper into the problem, could you please check the console tab and network requests in your browser's developer tools? Identifying any CORS-related errors could offer insights into why the Flask app is rejecting the request.

In case you encounter CORS-related errors, consider incorporating CORS into your Flask app. Here's a snippet you can use:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins="*")

Moreover, to avoid conflicts with certain operating systems that utilize ports 5000-7000 for internal purposes, consider changing your app's port to something greater than 7000. For instance:

if __name__ == "__main__":
    app.run(port=8000, debug=True)

Please add any error messages or logs from your app to your question, and I'll tailor my answer to address those specifics.