Простая загрузка файлов не работает с фреймворком Vue.js & Flask

Question

У меня проблемы с загрузкой изображения через FormData из Vue.js в мою бэкэнд-колбу Python. У меня есть сервер node.js, который обрабатывает Vue.js (Nuxt), поэтому я могу сделать 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 (просто фрагмент прокси-функции с сервера node.js, который обслуживает приложение nuxt)

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 - это Node-сервер, 5000 - это колба-сервер)

Кроме того, Flask возвращает 200, как будто все прошло хорошо. И после проверки колбы request, файл находится там без проблем.

Я не уверен, почему кажется, что ответ не получается, или, как говорится в ошибке, труба разрывается.

Answer 1

Для всех, кто находит это, ищет ответы, он был решен путем запуска localhost через ngrok .

Кажется, что отсутствовали заголовки, я считаю, что важным является Connection: keep-alive, когда он обслуживает только через localhost.