如何在Quasar（Vue3）客户端应用中实现POST请求路由？

核心逻辑说明 #

Quasar基于Vue Router，而Vue Router本质是前端路由系统，仅处理GET请求的URL匹配，原生不支持POST路由。直接向前端路由发送POST请求会被开发服务器（或生产静态服务器）拒绝，因为静态资源服务器默认只处理GET/HEAD等请求方法。我们需要绕开直接POST到前端路由的思路，采用以下可行方案：

方案1：后端接口转发+前端状态管理跳转 #

1. 搭建一个后端接口（比如/api/forward-person），专门接收带敏感信息的POST请求
2. 客户端发送POST请求到该接口，后端验证后返回目标用户ID，同时将敏感信息存入HttpOnly Cookie（或返回加密后的敏感数据）
3. 前端收到响应后，用Pinia/Vuex存储敏感信息，再通过router.push()跳转到/person/[id]页面
4. 目标页面从状态管理中读取敏感信息，用于后续和其他服务器通信

示例前端代码：

async function navigateToPersonDetail() {
  const response = await fetch('/api/forward-person', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ 
      someSecret: 'superSecretValueDontTellTheFBI',
      personId: 3
    })
  })
  const data = await response.json()
  // 存入Pinia状态管理
  usePersonStore().setSensitiveData(data.someSecret)
  // 跳转到目标路由
  router.push(`/person/${data.personId}`)
}

方案2：表单提交+SessionStorage暂存（仅开发环境适用） #

如果暂时无法新增后端接口，可临时用此方式测试（生产环境不推荐，静态服务器大概率会拒绝POST请求到静态页面）：

1. 创建隐藏HTML表单，设置action为目标路由URL，method="POST"，添加隐藏字段存储敏感信息
2. 提交表单后，在目标页面的路由钩子中读取FormData，将敏感信息存入SessionStorage
3. 页面加载时从SessionStorage读取数据使用

示例代码：

<!-- 隐藏表单 -->
<form id="postRouteForm" action="/person/3" method="POST" style="display: none">
  <input type="hidden" name="someSecret" value="superSecretValueDontTellTheFBI">
</form>

// 触发表单提交
document.getElementById('postRouteForm').submit()

// 在路由全局钩子中处理数据
router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/person/') && window.location.method === 'POST') {
    const formData = new FormData(document.forms[0])
    const secret = formData.get('someSecret')
    sessionStorage.setItem('tempPersonSecret', secret)
  }
  next()
})

方案3：HttpOnly Cookie+后端重定向（最安全） #

1. 客户端发送POST请求到后端接口，携带敏感信息
2. 后端验证后，将敏感信息存入HttpOnly、Secure属性的Cookie中，返回302重定向到/person/[id]
3. 前端页面加载后，通过后端接口读取Cookie中的敏感信息（前端无法直接读取HttpOnly Cookie，需接口中转）
4. 目标页面使用接口返回的敏感信息完成后续操作

这种方式完全避免敏感信息暴露在前端，也符合HTTP规范，是生产环境的最优选择。

重要注意事项 #

• 禁止将敏感信息存入LocalStorage，易被XSS攻击窃取
• 生产环境必须启用HTTPS，防止数据传输过程中被窃听
• Vue Router本身不支持POST路由，所有方案都需要通过后端或前端状态管理间接实现

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