从本地Jupyter Notebook向Vue传JSON遇405 HTTP方法不允许错误

问题根源 #

你的/api/python/index.ts接口没有区分HTTP请求方法：当Python用POST提交数据时能正常读取body，但Vue端useFetch默认发起GET请求，此时接口代码尝试读取不存在的GET请求body，导致服务器返回405错误。同时，原接口没有存储Python传来的数据，就算请求成功也无法返回有效内容。

修正步骤 #

1. 修改API接口，区分请求方法并存储数据 #

更新/api/python/index.ts代码，添加请求方法判断，同时用变量存储提交的数据（开发环境可用内存变量，生产环境建议改用数据库/文件存储）：

// 用于存储数据的内存变量（重启服务会丢失）
let storedData = []

export default defineEventHandler(async (event) => {
  // 处理POST请求：接收并存储Python传来的数据
  if (event.node.req.method === 'POST') {
    const body = await readBody(event)
    storedData = body
    console.log('已接收并存储数据:', body)
    return { success: true, data: body }
  }
  // 处理GET请求：返回存储的数据给Vue
  else if (event.node.req.method === 'GET') {
    return { success: true, data: storedData }
  }
  // 其他请求方法返回405
  else {
    setResponseStatus(event, 405)
    return { success: false, message: '不支持该请求方法' }
  }
})

2. 统一Vue端请求路径 #

Vue中useFetch的路径和Python请求的路径保持一致（去掉末尾斜杠）：

export default {
  setup() {
    const { data } = useFetch('/api/python')
    return { data }
  }
}

验证流程 #

1. 运行Python脚本发起POST请求，提交数据到接口；
2. 查看Nuxt控制台，确认数据已被存储；
3. 刷新Vue页面，useFetch会发起GET请求获取存储的数据，此时不再返回405错误。

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