Flask接收POST请求时为何损坏Base64字符串？

我来帮你捋捋这个Canvas生成Base64图片后POST到Flask后端的问题，先把你的代码格式化出来，再说说几个关键的调整点：

你的原始前端代码 #

img.src = canvas.toDataURL('image/png');
$.ajax({ 
    url: "http://0.0.0.0:9000/postimage", 
    type: "POST", 
    crossDomain: true, 
    processData: false, 
    data: encodeURI(img.src), 
    success: function (response) { 
        console.log(response); 
    }, 
    error: function (xhr, status) { 
        console.log(xhr) 
        console.log(status) 
        // 看起来这里代码没写完，估计是遇到请求失败的问题了
    }
});

几个需要调整的地方&解决方案 #

1. 去掉多余的encodeURI，明确请求内容类型

canvas.toDataURL()生成的Base64字符串本身就是URL安全的（除了开头的data:image/png;base64,前缀），用encodeURI反而会给后端解析添乱。另外最好指定contentType，让后端清楚接收的是文本数据：

const base64Img = canvas.toDataURL('image/png');
$.ajax({ 
    url: "http://0.0.0.0:9000/postimage", 
    type: "POST", 
    crossDomain: true, 
    processData: false,
    contentType: "text/plain", // 明确告诉后端是纯文本数据
    data: base64Img, 
    success: function (response) { 
        console.log('请求成功:', response); 
    }, 
    error: function (xhr, status) { 
        console.error('请求失败:', xhr, status);
    }
});

2. Flask后端要正确接收原始数据+处理跨域

因为你设置了processData: false，后端不能用request.form来获取数据，得用request.data获取原始请求体。另外跨域问题必须在后端配置，否则浏览器会直接拦截请求：

from flask import Flask, request
# 先安装flask-cors：pip install flask-cors
from flask_cors import CORS
import base64

app = Flask(__name__)
CORS(app)  # 开发环境允许所有跨域请求，生产环境可以配置具体域名

# 可以设置允许的最大请求大小（比如16MB），避免大图片请求被拦截
app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024

@app.route('/postimage', methods=['POST'])
def post_image():
    # 解码获取前端传的Base64字符串
    base64_data = request.data.decode('utf-8')
    
    # 去掉前缀，只保留纯Base64编码部分
    if base64_data.startswith('data:image/png;base64,'):
        base64_data = base64_data.split(',')[1]
    
    # 示例：把Base64转成图片保存到本地
    with open('saved_canvas.png', 'wb') as f:
        f.write(base64.b64decode(base64_data))
    
    return {'status': 'success', 'message': '图片已接收并保存'}

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=9000, debug=True)

额外注意点 #

• 如果你的Canvas尺寸很大，生成的Base64会非常长，一定要记得设置Flask的MAX_CONTENT_LENGTH，否则会返回413请求过大的错误。
• 生产环境不要用CORS(app)这种全局允许的配置，最好指定允许的前端域名，比如CORS(app, resources={r"/postimage": {"origins": "https://your-frontend-domain.com"}})。

内容的提问来源于stack exchange，提问作者seanki