节点js空请求

Question

在我添加 csrf 之前一切都对我有用。我在 public/js/editor.js 中使用 fetch 将图像文件发送到服务器：

fetch('/upload', {
    method: 'post',
    body: formdata
}).then(res => res.json())
.then(data => {
    if (uploadType == 'image')
    {
        addImage(data, file.name);
    }
    else if (uploadType == 'banner')
    {
        bannerPath = `${location.origin}/${data}`;
        banner.style.backgroundImage = `url("${bannerPath}")`
    }
    else
    {
        console.error('Данный тип файла не поддерживается');
    }
})

在server.js我接受文件：

app.post('/upload', (req, res) => {
    console.log(req.files);
    
    let file = req.files.image;
    let date = new Date();
    console.log('test post');
    // image name
    let imagename = date.getDate() + date.getTime() + file.name;
    // image upload path
    let path = 'public/uploads/' + imagename;

    // create upload
    file.mv(path, (err, result) => {
        if (err) {
            throw err;
        } else {
            // our image upload path
            res.json(`uploads/${imagename}`)
        }
    })
})

添加 csrf 文件后开始看起来像这样：

成为：

editor.js FULL

const csrfToken = getCookie('XSRF-TOKEN');
console.log(csrfToken);
const headers = new Headers({
    'Content-Type': 'x-www-form-urlencoded',
    'X-CSRF-Token': csrfToken
});

fetch('/upload', {
    method: 'post',
    headers: headers,
    credentials: 'include',
    body: formdata
}).then(res => res.json())
.then(data => {
    if (uploadType == 'image')
    {
        addImage(data, file.name);
    }
    else if (uploadType == 'banner')
    {
        bannerPath = `${location.origin}/${data}`;
        banner.style.backgroundImage = `url("${bannerPath}")`
    }
    else
    {
        console.error('Данный тип файла не поддерживается');
    }
})

function getCookie(name) {
    if (!document.cookie) {
      return null;
    }
  
    const xsrfCookies = document.cookie.split(';')
      .map(c => c.trim())
      .filter(c => c.startsWith(name + '='));
  
    if (xsrfCookies.length === 0) {
      return null;
    }
    return decodeURIComponent(xsrfCookies[0].split('=')[1]);
  }

和server.jsFULL

const cookieParser = require("cookie-parser");
const csrf = require("csurf");

const csrfMiddleware = csrf({ cookie: true });
app.use(cookieParser());
app.use(csrfMiddleware);

app.all("*", (req, res, next) => {
    var token = req.csrfToken();
    res.cookie("XSRF-TOKEN", token);
    res.locals.csrfToken = token;
    next();
});

app.use(function (req, res, next) {
    var token = req.csrfToken();
    res.cookie('XSRF-TOKEN', token);
    res.locals.csrfToken = token;
    next();
});

//upload link
app.post('/upload', (req, res) => {
    console.log(req.files);
    
    let file = req.files.image;
    let date = new Date();
    console.log('test post');
    // image name
    let imagename = date.getDate() + date.getTime() + file.name;
    // image upload path
    let path = 'public/uploads/' + imagename;

    // create upload
    file.mv(path, (err, result) => {
        if (err) {
            throw err;
        } else {
            // our image upload path
            res.json(`uploads/${imagename}`)
        }
    })
})

问题

但是现在上传图片到editor.js后，server.js出现错误：

TypeError: Cannot read properties of undefined (reading 'image')

变量req.files已变为未定义

有什么问题？

Answer 1

    'Content-Type': 'x-www-form-urlencoded',

您正在覆盖浏览器随请求一起发送的 Content-Type header。

由于新值错误，服务器不知道如何解析body。

不要那样做。

节点js空请求

node js empty request

javascript

node.js

express

成为：