Flask开发服务器中跳转到下一页的HTML按钮无法正常工作如何解决？

问题原因 #

直接在浏览器打开本地HTML文件时走的是file协议，直接读取本地文件系统的资源，所以可以正常跳转。运行Flask应用后，所有页面请求都走HTTP协议交由Flask进程处理，你没有为upload.html配置对应的路由规则，Flask无法匹配到对应的处理逻辑，就会返回404错误。

解决方案 #

方案1：配置路由渲染模板（推荐） #

这是Flask项目的标准实现方式：

1. 将index.html和upload.html都放到Flask项目根目录下的templates文件夹（没有就新建一个）
2. 在你的Flask启动文件中新增upload.html对应的路由，示例代码如下：

from flask import Flask, render_template
app = Flask(__name__)

# 你原有返回首页的路由
@app.route('/')
def index():
    return render_template('index.html')

# 新增upload页路由
@app.route('/upload')
def upload_page():
    return render_template('upload.html')

3. 修改index.html中的跳转逻辑，推荐用Flask内置的url_for方法生成跳转地址，避免路径写错：
   把原来的onClick="location.href='upload.html'"修改为：

onClick="location.href='{{ url_for('upload_page') }}'"

方案2：作为静态文件处理 #

如果你的upload.html是完全不需要后端传参的纯静态页面，也可以用静态资源的方式访问：

1. 将upload.html放到Flask项目根目录下的static文件夹（没有就新建一个）
2. 将跳转地址修改为/static/upload.html即可。

注意事项 #

Flask服务的请求路径和你本地文件的物理存放路径没有直接绑定关系，所有可访问的路径都需要对应配置的路由规则或者静态文件夹映射，不要用本地文件系统的路径逻辑来配置服务端的跳转地址。

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