2017-01-21 4 views
3

NodeJS의 경로와 함께 AJAX에 fetch()를 사용하는 양식이 있습니다. AJAX POST가 경로를 공격하면 req.body에 빈 객체 {}가 표시됩니다. ;Express JS 경로에서 formData가있는 POST 가져 오기가 비어 있습니다.

//에서 app.js

app.use (bodyParser.json()) : 여기

코드입니다

app.use (bodyParser.urlencoded ({extended : true}))); form.js에서

//

form.getElementById('form__option').addEventListener('submit', e => { 
    e.preventDefault() 
    const form = $('form')[0] 
    fetch('/polls/create', { 
     method: 'POST', 
     body: new FormData(form) 
    }) 
}) 

// appRoute.js에서

exports.createPost = (req, res, next) => { 
    console.log('req body', req.body) 
    res.send('NOT IMPLEMENTED: pollsController createPost'); 
} 
+1

경로 정의 전에 app.use (...)를 넣었습니까? – cshion

+0

예, app.use (..., router) 전에 app.use가 실행됩니다 – bresson

+1

코드가 올바르게 표시됩니다. 요청 본문을 브라우저에서 확인하고 올바른지 확인하십시오 (Chrome DevTool의 '네트워크'탭 사용). 그런 다음 라우터 (미들웨어)의 시작 부분에 app.use를 추가하고 'req.body'를 확인하여 올바른지 확인하십시오 –

답변

2

여기서 문제는 FormDatamultipart/form-data, 익스프레스 '로 콘텐츠 유형을 설정하는 것입니다 body-parser을 이해하지 못했습니다.

참고 주석 here :

[몸 파서] 그들의 복잡하고 일반적으로 큰 자연 다중 시체를 처리하지 않습니다. 멀티 파트 바디의 경우 다음 모듈에 관심이있을 수 있습니다. busboy 및 connect-busboy; multiparty 및 연결 multiparty; 무서운; 멀터.

즉, FormData가 보내는 다중 부분 본문을 처리하기 위해 다른 모듈을 사용해야합니다. formidable을 추천 할 수 있습니다.이 경우 서버 코드는 다음과 같습니다.

const formidable = require('formidable') 

exports.createPost = (req, res, next) => { 
    var form = new formidable.IncomingForm(); 
    form.parse(req, (err, fields, files) => { 
     console.log(fields) 
     res.send('NOT IMPLEMENTED: pollsController createPost'); 
    } 
} 
관련 문제