简单文件上传不适用于Vue.js和Flask框架

Question

我在通过FormData将图像从Vue.js上传到我的Python Flask后端时遇到问题。 我有一个处理Vue.js（Nuxt）的node.js服务器，因此可以执行SSR。 最小堆栈设置：

Vue.js (Nuxt) frontend --> node.js proxy server ---> Python flask backend

---

HandleFile.vue

const formData = new FormData()
formData.append('image', file)
formData.append('data', JSON.stringify(upcomingReq))

const resp = await this.$axios.post('/api/receive-file', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})

---

server.js （仅是为nuxt应用程序提供服务的node.js服务器的代理功能的代码段）

app.use('/api', proxy({
  target: API_URI,
  changeOrigin: true,
  // logLevel: 'debug',
  onProxyReq(proxyReq, req, res) {
    if (req.session.authToken) {
      proxyReq.setHeader('Authorization', 'Bearer ' + req.session.authToken)
    }
  },
}))

---

app.py （接收文件的控制器）

@v1.route('/api/receive-file', methods=['GET', 'POST'])
@auth_required
def receive_file():
    print('in here')
    return jsonify({'hi': 'ok'})

---

这是我得到的错误：

（ 3000是节点服务器， 5000是烧瓶服务器）

另外，Flask会返回200 ，好像一切正​​常。 并且在检查了Flask request ，文件就在其中，没有问题。

我不确定为什么响应似乎失败，或者如错误所示，管道损坏了。

Answer 1

对于任何找到此问题的人，可以通过ngrok运行localhost来解决 。

似乎缺少标头，我相信一个重要的标头是Connection: keep-alive ，仅通过本地主机提供服务时。