Flask项目中app.js文件404错误排查求助

核心问题：Flask静态文件规则导致app.js无法被访问 #

Flask默认仅从static目录提供静态资源（JS、CSS、图片等），你的app.js放在项目根目录，Flask没有配置对应的路由或静态文件映射来处理/app.js请求，因此浏览器返回404。

另外HTML里的../app.js路径，当页面通过/路由渲染时，浏览器会将其解析为/app.js，刚好命中Flask未处理的路径。编辑器能定位到文件是基于本地文件系统的相对路径逻辑，和浏览器的HTTP请求路径逻辑完全不同。

解决方案 #

方案1：规范放置静态文件（推荐） #

1. 将app.js移动到static目录下，可直接放在根目录或新建子目录分类存放：

   > static
      > Images
      > js
         app.js
      style.css
   > templates
      index.html
   app.py
   

2. 修改HTML中的script标签路径，推荐用Flask的url_for函数生成静态文件路径，彻底避免相对路径出错：

   <script type="text/javascript" src="{{ url_for('static', filename='js/app.js') }}"></script>
   <!-- 若直接放在static根目录，写filename='app.js'即可 -->
   

   你的CSS路径也建议改成url_for形式，规避同类问题：

   <link rel="stylesheet" media="all" href="{{ url_for('static', filename='style.css') }}">
   

方案2：添加路由返回根目录的app.js（不推荐） #

如果一定要把app.js留在根目录，可在app.py中添加路由返回该文件：

from flask import send_from_directory
import os

@app.route('/app.js')
def serve_app_js():
    return send_from_directory(os.getcwd(), 'app.js')

但这种方式不符合Flask的静态文件规范，不建议长期使用。

额外潜在问题 #

你的app.js中AJAX请求存在语法错误：

$.ajax({
    url: '/test',
    type: "POST",
    type: "GET", // 此行会覆盖上方的POST，实际发送的是GET请求
    contentType: "application/json",
    data: JSON.stringify(people)
});

GET请求不会将数据放在请求体中，后端request.get_json()会返回None，导致打印output: None。需根据需求保留一个type，若要发送POST请求，删除type: "GET"即可。

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