Я отправляю изображение на мой экспресс-сервер 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!:
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.
Пожалуйста, посмотрите там:
Я не могу получить 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);
Я пытаюсьпереключиться на vue-resource, мне действительно достаточно!
Edit 6: похоже, что это все еще проблема CORS:
РЕДАКТИРОВАТЬ 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);
});
теперь он работает безупречно, никаких сетевых ошибок больше нет, и я правильно получаю имя файла !!