[FIXED] Network Error when Making Fetch/Axios Request from React to Flask Server

Issue

I'm encountering an issue with making network requests from my React application to a Flask server. Surprisingly, the Flask server successfully receives the request, but when attempting to return a response, I consistently receive a "Network Error" on the client side. This occurs when making a simple GET request using either fetch or axios.

Details:

Server Setup:

Confirm that my Flask server is running at http://127.0.0.1:8000. CORS is configured using flask_cors. The server returns a 200 status code even in the case of an exception. Code:

@app.route('/test', methods=['GET'])
def test():
    delete_db(["***"])
    try:
        for data in array:
            suppliers = build_supliers(data)
            for supplier in suppliers:
                insert_supplier(suppliers[supplier])
        
        logger.info('All suppliers have been inserted successfully');
        return jsonify({"data":None, "status":200, "message": "successfully"})
    except Exception as e:
        logger.error(f"An error occurred during synchronization: {str(e)}")
        return jsonify({"error": str(e), "status": 500, "message": "Internal Server Error"})

Client Code:

Using fetch or axios for the GET request. Headers are set correctly ('Accept': 'application/json, text/plain, /').

Code:

export const test = async (): Promise<any>=> {
  try {
    const response = await axios.get(`${process.env.REACT_APP_SYNC_SERVER}/test`,{ headers: {
    "Accept": "application/json, text/plain, */*",
  },});
    return response.data;
  } catch (error:any) {
    const { data } = error.response;
    throw data;
  }
};

Attempts to Resolve:

1. Verified server accessibility.
2. Checked CORS configuration.
3. Inspected browser console for additional error details.
4. Attempted the same request using fetch.

Has anyone encountered a similar issue when making network requests between a React app and a Flask server? Flask successfully receives the request, but a "Network Error" occurs when attempting to return the response. Any suggestions on how to troubleshoot or resolve this issue?

error object:

{
    "message": "Network Error",
    "name": "AxiosError",
    "stack": "AxiosError: Network Error\n    at XMLHttpRequest.handleError (http://localhost:3000/static/js/bundle.js:819713:14)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "adapter": [
            "xhr",
            "http"
        ],
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*"
        },
        "method": "get",
        "url": "http://localhost:8000/test"
    },
    "code": "ERR_NETWORK",
    "status": null
}

Solution

Check carefully that you are using CORS correctly, it will do the job.

from flask_cors import CORS
from flask import Flask, jsonify

# Start script
app = Flask(__name__)
CORS(app) # ADD This line.

@app.route('/test', methods=['GET'])
def test():
    delete_db(["***"])
    try:
        for data in array:
            suppliers = build_supliers(data)
            for supplier in suppliers:
                insert_supplier(suppliers[supplier])
        
        logger.info('All suppliers have been inserted successfully');
        return jsonify({"data":None, "status":200, "message": "successfully"})
    except Exception as e:
        logger.error(f"An error occurred during synchronization: {str(e)}")
        return jsonify({"error": str(e), "status": 500, "message": "Internal Server Error"})

Answered By - OmerBY