Ufdjrw

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.

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.