Flask应用部署在Apache下POST请求返回404问题求助

核心原因 #

你的应用挂载在Apache的/app_doc_image_viewer子目录下，但前端发起的POST请求直接使用了绝对路径/update-status，而实际正确的请求路径应该是/app_doc_image_viewer/update-status。同时Flask默认不知道自身运行在子目录环境中，导致路由匹配失败。

解决方案（无需修改Flask路由前缀） #

1. 配置Flask的应用根路径 #

在Flask应用代码或WSGI文件中添加APPLICATION_ROOT配置，让Flask知晓自身挂载的子目录：

方法一：在Flask主应用文件中添加

# app_doc_image_viewer.py
from flask import Flask

app = Flask(__name__)
app.config['APPLICATION_ROOT'] = '/app_doc_image_viewer'

# 其余路由和配置保持不变

方法二：在WSGI文件中配置
修改flask_app.wsgi：

#!/usr/bin/python
import sys
import logging
logging.basicConfig(stream=sys.stderr)
sys.path.insert(0,"/srv/flask_apps/flask_document_image_viewer")
 
from app_doc_image_viewer import app as application
# 添加应用根路径配置
application.config['APPLICATION_ROOT'] = '/app_doc_image_viewer'

2. 修复前端请求路径（使用Flask的url_for生成正确URL） #

前端的updateImageStatus函数当前请求的是绝对路径/update-status，需要改为使用Flask的url_for生成包含子目录前缀的正确路径。

修改模板中的复选框代码

将onchange事件传入url_for生成的路由地址：

<!-- "Image" Checkbox -->
<div>
     <input type="checkbox" id="image-{{ image.image_id }}" name="image-{{ image.image_id }}"
          {% if image.image %}checked{% endif %} onchange="updateImageStatus('{{ image.image_id }}', this.checked, '{{ url_for('update_image') }}')">
     <label class="checkbox-label" for="image-{{ image.image_id }}">Image: maps, photos, etc.</label>
</div>

调整对应的JavaScript函数

更新updateImageStatus函数，使用传入的正确URL发起请求：

function updateImageStatus(imageId, isChecked, apiUrl) {
    // 如果启用了Flask-WTF的CSRF保护，需要获取CSRF令牌
    const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content || '';
    
    fetch(apiUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRFToken': csrfToken
        },
        body: JSON.stringify({
            image_id: imageId,
            image: isChecked ? 1 : 0
        })
    })
    .then(response => {
        if (!response.ok) throw new Error('Request failed');
        return response.json();
    })
    .then(data => {
        console.log('Status updated:', data);
    })
    .catch(error => {
        console.error('Update error:', error);
    });
}

3. 验证Apache配置（当前配置已正确） #

你的ssl.conf中WSGIScriptAlias配置无需修改，该配置会将所有以/app_doc_image_viewer开头的请求转发给Flask应用处理：

WSGIScriptAlias /app_doc_image_viewer /srv/flask_apps/flask_document_image_viewer/flask_app.wsgi

验证步骤 #

1. 重启Apache服务：systemctl restart httpd
2. 访问应用页面，打开浏览器开发者工具的网络标签
3. 触发复选框修改，查看POST请求的URL是否为/app_doc_image_viewer/update-status
4. 确认请求返回200状态码，修改操作正常持久化

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