node.js - 当状态为 200 ok 时，axios 发送网络错误

Question

我正在使用以下 axios 查询在我的 Node.js Express 服务器上发送图片:

axios.post(this.server + 'images',
    formData, {
        crossdomain: true,
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    }
).then(function (result) {
    console.log(result);
})
.catch(function (error) {
    console.log(error);
}); 

图片现在在服务器上，但是，请看一下我在 Firefox 控制台中看到的奇怪行为，它显示“网络错误”，而 Axios 正在接收 200 状态!:

POST http://localhost/images
[HTTP/1.1 200 OK 20ms]

Error: "Network Error"
    createError createError.js:16
    handleError xhr.js:81

这是我的 node.js 后端 Cors 参数:

const cors = require("cors");
app.use(
  require("cors")({
    origin: function(origin, callback) {
      callback(null, origin);
    }
  })
);
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin); // update to match the domain you will make the request from
  //to allow cross domain requests to send cookie information.
  res.header("Access-Control-Allow-Credentials", true);
  // list of methods that are supported by the server
  res.header("Access-Control-Allow-Methods", "OPTIONS,GET,PUT,POST,DELETE");

  res.header(
    "Access-Control-Allow-Headers",
    "X-Requested-With, X-HTTP-Method-Override, Content-Type, Accept, X-XSRF-TOKEN"
  );

  next();
});

这是一个大问题，因为我需要能够利用 .then() 响应，但我不能。

我还应该做什么？

• 我的 Node 服务器在localhost:80上启动
• 我的 Webpack-vue.js 应用 是在 localhost:8080 上启动的

注意:这是我用于获取图片的 Node 函数，请注意我在图片上传后发送了 200 状态:

app.post("/images", upload.single("file"), function(req, res, next) {
sharp(req.file.path)
    .resize(200, 200)
    .toBuffer(function(err, buffer) {
      fs.writeFile(req.file.path, buffer, function(e) {});
    });

  res.sendStatus(200);
});

编辑将我的 Node 服务器端口更改为 3000 :问题仍然相同:

POST http://localhost:3000/images
[HTTP/1.1 200 OK 11ms]

Error: "Network Error"
    createError createError.js:16
    handleError xhr.js:81

如何获得结果答案？

我需要获取重命名的图片，但无法访问 .then() axios 函数。

请看一下:

我无法在 axios .then() 中获取 nico.jpg-5454545 ，它总是显示“网络错误”

编辑 3:像这样更改了我的后端参数，但没有成功:(这是 webpack 应用程序端口)

res.header("Access-Control-Allow-Origin", "http://localhost:8081");

编辑 4:像这样更改了我的 axios 查询，但没有运气(这是 node.js 服务器端口):

axios.post(this.server + 'images',
                    formData, {
                      crossdomain: true,
                        headers: {
                            'Content-Type': 'multipart/form-data',
                            'Access-Control-Allow-Origin': "http://localhost:3000"
                        }
                    }
                ).then(function (e) {
                     if (e){
                    console.log(e);
                   }
                })
               .catch(function (err ) {
                   if (err.message === "Network Error"){
                    console.log(err); // Works but nothing gets shown
                   }

                }); 
        },

编辑 5:

尝试了这段代码，但没有成功，我需要访问响应数据，并且只得到“网络错误”

 const send = async () => {
            try {
                return await  axios.post(this.server + 'images',
                    formData, {
                      crossdomain: true,
                        headers: {
                            'Content-Type': 'multipart/form-data'
                        }
                    }
                )
            } catch (error) {
                console.error(error)
            }
            }

            const myFilename = send()
            console.log(myFilename);

我正在尝试切换到 vue-resource，我真的足够了!

编辑 6: 看来这仍然是 CORS 问题:

编辑 7:已解决!!!

问题是我的整个 CORS 代码位于 Node.js 服务器上的 app.js 内的 app.post("/images"... function 下。换句话说，cors 代码需要保留在 app.js Node.js 服务器文件的顶部。

这是我的 CORS 代码，请注意，它现在位于图像 Web 服务之前:

// ----------------------------------- CORS -------------------------------------------

const cors = require("cors");
app.use(require("cors")());

app.use(
  cors({
    origin: ["http://localhost:8081", "http://localhost:8081/images"],
    credentials: true
  })
);

// ----------------------------------- END OF CORS -------------------------------------------

app.post("/images", upload.single("file"), function(req, res, next) {
  console.log(req.file);

  sharp(req.file.path)
    .resize(200, 200)
    .toBuffer(function(err, buffer) {
      fs.writeFile(req.file.path, buffer, function(e) {});
    });
  res.send({ filename: req.file.filename });
  // res.sendStatus(200);
}); 

它现在工作完美，不再出现网络错误，我的文件名正确!!

Answer 1

编辑 7:已解决!!!

问题是我的整个 CORS 代码是在 Node.js 服务器上的 app.js 内的 app.post("/images"... function 下编写的。换句话说，cors 代码需要保留在 app.js node.js 服务器文件的顶部。

这是我的 CORS 代码，请注意，它现在位于图像 Web 服务之前:

// ----------------------------------- CORS -------------------------------------------

const cors = require("cors");
app.use(require("cors")());

app.use(
  cors({
    origin: ["http://localhost:8081", "http://localhost:8081/images"],
    credentials: true
  })
);

// ----------------------------------- END OF CORS -------------------------------------------

app.post("/images", upload.single("file"), function(req, res, next) {
  console.log(req.file);

  sharp(req.file.path)
    .resize(200, 200)
    .toBuffer(function(err, buffer) {
      fs.writeFile(req.file.path, buffer, function(e) {});
    });
  res.send({ filename: req.file.filename });
  // res.sendStatus(200);
}); 

现在工作完美，不再出现网络错误，而且我的文件名正确!!