Stripe/Flask/NGINX部署时如何去除URL中的.html#后缀

你之前两个方案失败的原因非常明确：

• render_template 找不到文件：Flask 默认仅从项目根目录的 templates 文件夹读取模板文件，你初始化 App 时仅配置了 static_folder='public'，没有显式指定模板路径，放在 public 目录下的 HTML 文件自然不会被模板引擎识别。
• Nginx 重写规则导致 CSS 加载失败：你之前写的全匹配重写规则会无差别给所有请求（包括 CSS、JS、图片等静态资源）追加 .html 后缀，把 prodA.css 的请求重写成 prodA.css.html，当然找不到对应资源。

补充：URL 中的 # 锚点部分默认不会被浏览器发送到服务端，如果是你代码里硬编码的链接带了 # 尾缀，优先直接修改静态页内的链接地址，服务端重定向做兜底处理即可。

优先选择 Nginx 层处理的方案，性能更高，不需要改动业务代码。

方案1：Nginx 层配置重写（推荐） #

直接修改对应站点的 Nginx server 配置块，注意规则顺序：静态资源匹配优先，其次是页面重写，最后是动态请求反向代理，参考配置如下：

server {
    listen 80;
    server_name 你的域名或服务器IP;

    # 先匹配静态资源，直接返回文件，不走重写逻辑
    location ~* \.(css|js|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        root /你自己的项目绝对路径/MyProject/public;
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    # 处理/checkout路径下的无后缀请求，自动补全.html后缀
    location /checkout/ {
        root /你自己的项目绝对路径/MyProject/public;
        if (!-e $request_filename) {
            rewrite ^(/checkout/[a-zA-Z0-9_-]+)$ $1.html last;
        }
    }

    # 301永久重定向：把带.html后缀的旧地址跳转到无后缀地址
    if ($request_uri ~ ^/(.*)\.html(\?.*)?$) {
        return 301 /$1$2;
    }

    # 兜底处理带#尾缀的请求
    if ($request_uri ~ ^/(.*)#$) {
        return 301 /$1;
    }

    # 其余动态请求反向代理到Gunicorn
    location / {
        proxy_pass http://unix:/你自己的Gunicorn sock文件绝对路径;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

配置完成后执行以下命令校验并重载：

nginx -t # 校验配置语法，没有报错再执行下一步
systemctl reload nginx

这个规则只会给/checkout路径下的无后缀页面请求补全.html，不会误改静态资源请求，不会出现之前CSS加载失败的问题，同时旧地址301跳转对搜索引擎友好。

方案2：Flask 层路由配置（适合不想改动Nginx规则的场景） #

如果不想调整Nginx配置，直接修改Flask代码即可：
第一步，修改Flask初始化参数，把public目录同时指定为模板目录：

app = Flask(
    __name__,
    static_url_path='',
    static_folder='public',
    template_folder='public' # 新增该行，指定public为模板目录
)

第二步，新增对应路由，同时做后缀跳转和安全校验：

from flask import redirect, url_for, render_template

# 把带.html后缀的旧请求301跳转到无后缀地址
@app.route('/checkout/<page>.html')
def redirect_old_checkout_page(page):
    return redirect(url_for('show_checkout_page', page=page), code=301)

# 无后缀地址直接渲染对应HTML文件
@app.route('/checkout/<page>')
def show_checkout_page(page):
    # 必须加白名单校验，避免任意文件读取漏洞
    allowed_pages = ['prodA', 'prodB']
    if page not in allowed_pages:
        return 404
    return render_template(f'Checkout/{page}.html')

改完代码记得重启Gunicorn服务生效，静态资源还是走原有静态路径逻辑，不会出现加载异常。

如果配置后仍有异常，按以下顺序排查：

• 优先查看Nginx错误日志 /var/log/nginx/error.log，确认是路径配置错误还是文件权限问题
• 静态资源加载异常时，打开浏览器F12控制台查看资源请求的实际地址，确认是否被错误重写
• 检查public目录及下属Checkout目录的权限，确保Nginx、Gunicorn的运行用户有文件读取权限

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