Flask应用POST请求后render_template未触发及错误页面跳转404问题求助

让咱们一步步解决你的问题，先理清最初render_template没生效的根源，再处理后续的404错误：

一、为什么最初的render_template没生效？ #

其实服务器已经调用了render_template，只是你的前端代码没处理它的响应结果！

你用fetch向/run_error发送POST请求时，服务器返回了run_error.html的HTML内容，但fetch是异步请求工具，不会自动帮你跳转页面——它只会把响应数据返回给你，而你之前的代码里只打印了Success:，完全没用到服务器返回的HTML，所以页面自然停留在b.html，看起来像是render_template没生效。

二、解决更新后的404错误 #

你后来尝试的跳转思路是对的，但有几个关键错误导致了404：

1. 变量名拼写错误 #

服务器端display_error函数的参数写成了error_ouput（少了字母t），和路由里的<error_output>、模板变量error_output不匹配，这会导致参数无法正确传递，甚至触发代码报错。

2. URL参数包含非法字符 #

Traceback内容里有大量特殊字符（换行、空格、冒号、括号等），直接作为URL路径部分会被浏览器编码，不仅容易超出URL长度限制，还会导致Flask路由无法正确匹配。

3. 相对路径的潜在问题 #

window.location.href = 'display_error/' + response用的是相对路径，如果b.html不在根目录下，跳转路径会出错，最好用绝对路径。

修正后的完整方案 #

服务器端代码（用Session存储错误信息，更安全可靠）

from flask import Flask, request, render_template, session, jsonify

app = Flask(__name__)
# 必须设置SECRET_KEY才能使用Session
app.secret_key = "your-random-secret-key-here"  # 替换成随机字符串

@app.route('/run_error', methods=['POST'])
def error():
    if request.method == 'POST':  # 注意这里是==不是=，之前的语法错误会导致服务器报错
        request_json = request.json
        error_output = request_json['data']
        # 把错误信息存入Session，避免URL传递的问题
        session['error_output'] = error_output
        # 返回跳转指令给前端
        return jsonify({'redirect': '/display_error'})

@app.route('/display_error', methods=['GET'])
def display_error():
    # 从Session中取出错误信息，没有则返回默认提示
    error_output = session.get('error_output', 'No error information available')
    # 取出后删除Session中的内容，避免重复展示
    session.pop('error_output', None)
    return render_template('run_error.html', error_output=error_output)

前端代码（处理跳转指令，完善错误捕获）

const nav = async() => { 
  const response = await fetch('run'); 
  if( response.status !== 200 ) { 
    throw new Error('Request failed'); 
  } 
  return await response.json(); 
}; 

document.addEventListener('DOMContentLoaded', () => { 
  nav().then(data => { 
    if(data != null && typeof(data) === 'object') { 
      if(data['run_result'] === 'run_success'){ 
        // 成功执行流程的逻辑
      } else { 
        const error_output = data['error_output']; 
        const sent_data = { 'data': error_output}; 
        fetch(`/run_error`, { 
          method: 'POST', 
          headers: { 
            'Content-Type': 'application/json', 
          }, 
          body: JSON.stringify(sent_data) 
        })
        .then(response => {
          if (!response.ok) {
            throw new Error('Network response failed');
          }
          return response.json();
        })
        .then(result => {
          // 跳转到错误展示页面
          window.location.href = result.redirect;
        })
        .catch(error => {
          console.error('Error during error handling:', error);
        }); 
      } 
    } 
  }).catch(error => {
    console.error('Error in nav function:', error);
  }); 
});

补充说明 #

• 用Session存储错误信息，避免了URL传递特殊字符的问题，也更安全（不会把敏感错误信息暴露在地址栏）。
• 一定要设置SECRET_KEY，否则Flask的Session无法正常工作。
• 之前的语法错误if request.method = 'POST'（单等号）会导致服务器报错，必须改成双等号==。

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