Запрос на выборку с многокомпонентными данными завершается неудачно в Firefox, но не в Safari - PullRequest
Новая
       40

Запрос на выборку с многокомпонентными данными завершается неудачно в Firefox, но не в Safari

0 голосов
/ 16 января 2019

Я пытаюсь сделать простую загрузку файла в приложении Vue с помощью API fetch.

На сервере есть простой express.js сервер, прослушивающий маршрут. Я использую прокси для бэкэнда в приложении Vue.

vue.config.js 

module.exports = {
    devServer: {
        proxy: "http://localhost:3344"
    }
}

приложение Vue 

<template>
  <form @submit.prevent="sendFile" enctype="multipart/form-data">

    <div class="field">
      <input
        type="file"
        ref="files"
        class="file-input"
        @change="selectFiles"
      />
    </div>

    <div class="field">
      <button class="button is-info">
        Send
      </button>
    </div>

  </form>
</template>

<script>
export default {
  name: "Upload",

  data() {
    return {
      file: '',
    }
  },

  methods: {
    selectFiles() {
      this.file = this.$refs.file.files[0];
    },

    async sendFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      try {
        await fetch('/upload', {
          method: 'post',
          body: formData,
        })
      } catch(err) {
        console.log(err)
      }
    }
  }
}
</script>

Экспресс приложение 

const express = require('express');

const app = express();

app.post('/upload', (req, res) => {
  res.json({received: 'yes'})
})

app.listen(3344, () => console.log("running on localhost:3344"))

Я использую Firefox и Safari в качестве тестовых браузеров. Я запускаю приложения на локальном хосте, на MacOS 10.14. Когда я пытаюсь отправить форму без прикрепленного файла, она работает как ожидается в обоих браузерах. Однако, когда я выбираю файл и нажимаю «Отправить», в Firefox запрос не выполняется, и в консоли появляется ошибка TypeError: "NetworkError when attempting to fetch resource.". На консоли приложения Vue я получаю Proxy error: Could not proxy request /upload from 0.0.0.0:8080 to http://localhost:3344. See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (EPIPE).

Однако в Safari этого не происходит, и там он работает как положено.

Я думал, что это может быть версия Firefox или некоторые расширения, но я запускал ночную версию без надстроек, и она все еще не работает. Я также попытался использовать axios вместо fetch api, но возникла та же проблема.

1 Ответ

0 голосов
/ 22 января 2019

странно, это было исправлено, когда я добавил промежуточное ПО на экспресс-бэкэнд: 


const express = require('express');
const multer = require('multer');

const app = express();

const upload = multer({
    dest: './uploads/'
})

app.post('/upload', upload.single('file'), (req, res) => {
  res.json({received: 'yes'})
})

app.listen(3344, () => console.log("running on localhost:3344"))

Я до сих пор не знаю, почему это не работает без промежуточного программного обеспечения в Firefox, но в Safari это работает.

...