Axios отправил ошибку сети при статусе 200 ок - PullRequest
0 голосов
/ 05 ноября 2019

Я отправляю изображение на мой экспресс-сервер node.js с этим запросом axios:

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!:

problem

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();
});

Это большая проблема, потому что мне нужно иметь возможность использовать ответ the.then (), а я не могу.

Чточто еще мне делать?

  • Мой сервер узла запущен на localhost: 80
  • И мой Webpack-vue. Приложение js запущено на localhost: 8080

Примечание: Это функция моего узла для получения изображений. Обратите внимание, что я отправляюстатус 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);
});

РЕДАКТИРОВАТЬ Изменен порт сервера моего узла на 3000: проблемы остаются прежними:

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

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

Какn Я получаю результат ответа?

Мне нужно получить переименованное изображение, и я не могу получить функцию .then () axios.

Пожалуйста, посмотрите там: enter image description here

Я не могу получить nico.jpg-5454545 внутри axios .then (), он всегда говорит'ошибка сети'

РЕДАКТИРОВАТЬ 3: Без изменений изменил параметры моего бэкэнда: (это порт приложения веб-пакета)

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);

enter image description here

Я пытаюсьпереключиться на vue-resource, мне действительно достаточно!

Edit 6: похоже, что это все еще проблема CORS:

enter image description here

РЕДАКТИРОВАТЬ 7: РАЗРЕШЕНО !!!

Проблема заключалась в том, что весь мой код CORS был ниже моего app.post ("/ images" .. . function внутри моего app.js на сервере node.js. Другими словами, cors code должен находиться в верхней части файла сервера app.js node.js.

Теперь это мой код CORS, обратите внимание, теперь он ДО ПЕРЕД веб-службой изображений:

// ----------------------------------- 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);
}); 

теперь он работает безупречно, никаких сетевых ошибок больше нет, и я правильно получаю имя файла !! enter image description here

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...