I am encountering difficulties when trying to upload an image using FormData from Vue.js to my Python Flask backend. In my setup, I have a Node.js server that is responsible for handling Vue.js (Nuxt) in order to enable server-side rendering. The basic stack configuration looks like this:
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 message I'm experiencing:
https://i.sstatic.net/UdcHL.png
(3000 is the Node server, 5000 is the Flask server)
Additionally, Flask is responding with a 200 status code as if everything is okay. Upon checking the Flask request, it appears that the file is being received without any issues.
I'm puzzled as to why it seems like the response is failing, or why the error indicates that the pipe is breaking.