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

Question

I'm having issues uploading an image via FormData from Vue.js to my Python flask backend. I have a node.js server which handles Vue.js (Nuxt) so I can do SSR. The minimal stack setup:

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 (just a snippet of the proxy function from the node.js server which serves the nuxt app)

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 (the controller that receives the file)

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

---

This is the error I'm getting:

( 3000 is the Node server, 5000 is the flask server)

Also, Flask is returning a 200 as if everything went ok. And upon inspecting the Flask request , the file is in there without a problem.

I'm not sure why it seems the response is failing, or as the error says, the pipe becomes broken.

Answer 1

For anyone that finds this looking for answers, it was resolved by running the localhost through ngrok .

It seems there were headers missing, I believe an important one being Connection: keep-alive , when serving only via localhost.