部署Inertia Django Vite至fly.io遇CORS错误的排查与解决

问题场景 #

将Inertia Django Vite Vue极简模板部署至fly.io，使用gunicorn作为WSGI服务器。本地运行正常，但部署后页面空白，浏览器报CORS错误，检查页面源码发现Vite相关脚本仍指向localhost:5173。

模板文件index.html代码：

{% load django_vite %}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  {% vite_hmr_client %}
  {% vite_asset 'main.ts' %}

  <title>Inertia + Django + Vite + Vue minimal</title>
</head>

<body>
  {% block inertia %}{% endblock %}
</body>

</html>

浏览器解析后生成的关键代码片段：

<script type="module" src="http://localhost:5173/static/@vite/client"></script>
<script type="module" src="http://localhost:5173/static/main.ts"></script>

排查过程 #

• 尝试修改Dockerfile和vite.config.ts配置，问题未解决
• 借助他人帮助完成模板部署，但主项目仍存在相同问题
• 测试发现将Django的DEBUG设为False时问题消失，进一步排查后定位到DJANGO_VITE_DEV_MODE环境变量

解决方案 #

将DJANGO_VITE_DEV_MODE设置为False即可解决问题。

原因说明 #

DJANGO_VITE_DEV_MODE是django-vite库的核心控制变量：

• 当值为True时，启用开发模式，模板标签会生成指向本地Vite开发服务器（默认localhost:5173）的脚本链接
• 生产环境部署时必须将该变量设为False，此时django-vite会使用构建后的静态资源路径，而非本地开发服务器地址

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