Request failed with status code 502 when deploying Flask app to Render, but working fine locally

Question

Recently I deployed my Flask application to Render, but I encountered an error that I didn't experience when running it on my local machine.

The error message I'm receiving is:

D {message: 'Request failed with status code 502', name: 'AxiosError', code: 'ERR_BAD_RESPONSE', config: {…}, request: XMLHttpRequest, …}

My application consists of a Flask backend and I'm using Axios to make requests to my flask route down below. The strange part is that the request works perfectly fine when running locally.

This is my flask route:

@app.route('/predict/tomato-leaf-disease-prediction', methods=['POST'])
def predict_tomato_leaf_disease():
    image_file = request.files['image']
    image = Image.open(image_file)

    model_index = int(request.form.get('model'))
    if model_index < 0: model_index = 0

    model = tomato_leaf_models[model_index]

    image = image.resize((112, 112))
    image = np.expand_dims(image, axis=0)
    predictions = model.predict(image)

    return jsonify({
        'Bacterial Spot': float(predictions[0][0]),
        'Early Blight': float(predictions[0][1]),
        'Late Blight': float(predictions[0][2]),
        'Leaf Mold': float(predictions[0][3]),
        'Septoria Leaf Spot': float(predictions[0][4]),
        'Two-spotted Spider Mite': float(predictions[0][5]),
        'Target Spot': float(predictions[0][6]),
        'Yellow Leaf Curl Virus': float(predictions[0][7]),
        'Mosaic Virus': float(predictions[0][8]),
        'Healthy': float(predictions[0][9])
    })

Here is the axios code:

async predict(event) {
            const url = window.location.origin + "/predict/tomato-leaf-disease-prediction   "

            this.loading = true

            const formData = new FormData();
            formData.append('image', this.imageFile);

            this.model = + this.model
            formData.append('model', this.model)
            console.log(this.model)
            axios.post(url, formData, {
                headers: {
                    'Content-Type' : 'multipart/form-data',
                    accept: 'application/json'
                }
            })
            .then(response => {
                console.log(response.data);
                this.predictions = response.data
                this.first = false
                this.loading = false
            })
            .catch(error => {
                console.error(error);
            });
        },

Here are the relevant Render logs I've captured:

I'm wondering if there could be any specific configurations or settings on Render that might be causing this error, especially related to Flask or Axios. Is there something I need to modify in my code or my Render deployment configuration to resolve this issue?

Any suggestions or insights would be greatly appreciated. Thank you!

1. I ensured that the API endpoint I'm using in my Axios request is correct and accessible. I even tested the endpoint separately using tools like cURL or Postman, and it returned the expected response.

2. I tried optimizing my code as possible as I can

Answer 1

Check your server's error logs and deployment settings. 502 code only happened to me with when my gunicorn server crashes and can't redirect the page to nginx. Check your error logs and restart the server. I suggest you using supervisor+nginx combination for deployment.

I hope my answer helps you!

Answer 2

I was facing a similar issue with React and node.js and the problem was that datas sent by post request were undefined. I solved importing 'bodyParser' in my server or index .js, like this:

import bodyParser from 'body-parser';
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

Type the last two before your app.use(express.json());