Phoenix LiveView增改Schema用POST而非Websocket报错求助

你遇到的核心问题是：LiveView表单提交时没有通过WebSocket发送请求，而是 fallback 到了普通HTTP POST，而你的路由中只定义了GET /sets/new的LiveView路由，没有对应的POST路由，所以报错"no route found for POST /sets/new"。

1. 修复表单代码，确保使用LiveView表单组件 #

检查lib/tumbling_dice_web/live/set_live/index.html.heex中的新增表单，必须使用Phoenix LiveView提供的表单助手，而非原生HTML表单：

<.form for={@changeset} phx-submit="save" phx-target={@myself}>
  <!-- 自动生成的表单字段示例 -->
  <div class="mb-4">
    <%= label f, :name, class: "block text-sm font-medium text-gray-700" %>
    <%= text_input f, :name, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 sm:text-sm" %>
    <%= error_tag f, :name %>
  </div>

  <div class="flex justify-end">
    <%= submit "保存", class: "inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500" %>
  </div>
</.form>

关键要点：

• 使用<.form>组件（而非原生<form>）
• 必须包含phx-submit属性，指定LiveView中处理提交的事件名（默认生成的是"save"）
• phx-target={@myself}确保事件发送到当前LiveView实例

2. 确认LiveView前端JS正确加载 #

检查assets/js/app.js，确保包含LiveSocket的初始化代码：

import { Socket } from "phoenix"
import LiveSocket from "phoenix_live_view"

let csrfToken = document.querySelector("meta[name='csrf-token']").getAttribute("content")
let liveSocket = new LiveSocket("/live", Socket, { params: { _csrf_token: csrfToken } })

// 连接LiveSocket
liveSocket.connect()

// 暴露给全局方便调试
window.liveSocket = liveSocket

如果这段代码缺失或损坏，LiveView无法拦截表单提交，会触发默认HTTP POST请求。

3. 验证页面LiveView连接状态 #

打开浏览器开发者工具（F12）：

• 切换到Network标签，筛选WS（WebSocket），确认存在连接到/live的WebSocket连接
• 切换到Elements标签，检查页面头部是否有<meta name="csrf-token" content="...">标签，这是LiveView交互的必需项

1. 表单提交行为验证：提交表单时查看Network面板，若出现POST /sets/new的HTTP请求，说明LiveView未拦截提交，优先检查表单代码和前端JS加载情况
2. LiveView挂载检查：在SetLive.Index的mount/3函数中添加IO.puts("LiveView mounted")，启动服务器后刷新页面，查看控制台是否输出该日志，确认LiveView正常挂载
3. 路由配置确认：运行mix phx.routes命令，确认输出的路由中所有/sets相关路由都是GET类型的LiveView路由（和你提供的已知路由一致即可）

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