脚本运行正常但本地服务器点击按钮出现404 Not Found问题求助

问题现象 #

本地直接打开HTML文件时，点击「Create Account」和「Sign In」按钮可正常弹出对应表单；部署到Flask服务器后，点击按钮触发404 Not Found错误，无法正常加载表单页面。

问题根源 #

1. 前端路径与Flask路由不匹配：前端JS使用相对路径../Forms/createAccount.html，但Flask路由配置为/Forms/createAccount（无.html后缀），且服务器环境下相对路径基准为当前页面URL（/），导致路径解析错误。
2. Sign In路由缺失：Flask后端仅配置了Create Account页面的路由，未添加Sign In页面的对应路由，触发请求时无匹配路径。
3. 静态资源路径错误：HTML中CSS引用使用相对路径，Flask环境下需通过模板语法生成正确的静态资源访问路径。

修复方案 #

1. 修正前端弹窗路径 #

将JS中的相对路径改为Flask路由的绝对路径，确保请求匹配后端路由：

function openCreateAccountForm() {
  const width = 500;
  const height = 500;
  const left = (window.innerWidth / 2) - (width / 2);
  const top = (window.innerHeight / 2) - (height / 2);
  window.open('/Forms/createAccount', 'popup', `width=${width},height=${height},top=${top},left=${left}`);
}

function openSignInForm() {
  const width = 500;
  const height = 500;
  const left = (window.innerWidth / 2) - (width / 2);
  const top = (window.innerHeight / 2) - (height / 2);
  window.open('/Forms/signIn', 'popup', `width=${width},height=${height},top=${top},left=${left}`);
}

2. 补充Flask路由配置 #

在app.py中添加Sign In页面的路由，确保每个表单页面都有对应路由：

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def signin():
    return render_template("signInPage.html")

@app.route('/Forms/createAccount')
def createAccount():
    return render_template('/Forms/createAccount.html')

# 新增Sign In页面路由
@app.route('/Forms/signIn')
def signIn():
    return render_template('/Forms/signIn.html')

3. 修正静态资源引用 #

使用Flask模板语法url_for生成静态资源的正确访问路径，替换原相对路径：

<!-- 原引用方式 -->
<!-- <link rel="stylesheet" href="../static/background1.css"> -->
<!-- <link rel="stylesheet" href="../static/signInPage.css"> -->

<!-- 修改后的引用 -->
<link rel="stylesheet" href="{{ url_for('static', filename='background1.css') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='signInPage.css') }}">

4. 确认项目目录结构 #

确保项目目录符合Flask的默认规范，结构如下：

你的项目文件夹/
├── app.py
├── templates/
│   ├── signInPage.html
│   └── Forms/
│       ├── createAccount.html
│       └── signIn.html
└── static/
    ├── background1.css
    └── signInPage.css

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