I’m running into an error that appears ONLY when submitting a form using the in-app browser on an iPhone. (Unfortunately don’t have access to an android to test this). Multiple browsers on desktop and the actual standalone Safari app on iphone all work fine.

I am running the flask app via fly.io and the form is submitted via an external site.
When it fails it returns the following message:

Bad Request

The browser (or proxy) sent a request that this server could not understand.

(When it works it returns a jpg image.)

This is my code:


from generator import draw_card
from flask import Flask, render_template, request, send_file
from io import BytesIO

app = Flask(__name__)

def serve_pil_image(pil_img):
    img_io = BytesIO()
    pil_img.save(img_io, 'JPEG', quality=80)
    return send_file(img_io, mimetype='image/jpeg')

def hello():
    return render_template("home.html")

@app.route("/card", methods=["GET", "POST"])
def render_card():
    text = request.form["cardText"]
    w = int(request.form["cardWidth"])
    h = int(request.form["cardHeight"])
    card = draw_card(w, h, text)

    return serve_pil_image(card)

if __name__ == "__main__":

The form submission code on my website:

          <form id="cardForm" method="POST" action="https://bebop-generator.fly.dev/card">
          <p><label>WIDTH: </label><input name="cardWidth" type="number" value="1920" min="200" max="10000" size="10" required/> &nbsp
          <label>HEIGHT: </label><input name="cardHeight" type="number" value="1080" min="200" max="10000" size="10" required/></p>
          <p><label>TEXT:</label><textarea name="cardText" placeholder="SEE YOU SPACE COWBOY..." font-size="10px" required></textarea></p>

          <p> <input id="cardSubmit" type="submit" formtarget="_blank" value="Submit">

New contributor

nthea is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.