时间戳

首页 > 解决方案 > 使用多部分数据获取请求在 Firefox 中失败，但在 Safari 中失败

javascript - 使用多部分数据获取请求在 Firefox 中失败，但在 Safari 中失败

问题描述

我正在尝试使用 fetch api 在 Vue 应用程序上进行简单的文件上传。

在后端有一个简单的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，但出现了同样的问题。

标签： javascriptfirefoxvue.jsaxiosfetch-api

解决方案

奇怪的是，当我在 express 后端添加中间件时，这个问题得到了修复：


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 中却可以。

推荐阅读