본문 파싱 미들웨어를 사용하는 경우에도 빈 요청 본문 얻기

Question

이 작은 로그인 시스템을 구현하려고하는데 요청을 내 webpack dev 서버로 전송하는 양식이 있습니다. 요청을 프록시합니다. 내 서버에.

양식 제출을 처리하고 POST 요청을 서버에 보내는 기능입니다. 내가 로그인을 클릭하면이 당신으로 로그인 엔드 포인트

const app = express(); 

app.use(bodyParser.urlencoded({ extended: false })); 

app.post('/login', (req, res) => { 
    console.log('Got user information: \n', req.body); 
    res.send('asd'); 
}) 

app.use('/graphql', bodyParser.json(), graphqlExpress({ schema })); 

app.use('/graphiql', graphiqlExpress({ endpointURL: '/graphql' })); 



app.listen(3001,() => { 
    console.log(` 
    ===== 
    Server running at http://localhost:3001/ 
    GraphiQL running at http://localhost:3001/graphiql/ 
    ===== 
    `) 
}) 

을 처리하는 서버 측 코드 여기 http://prntscr.com/hsbpyp

같이

handleSubmit = (e) => { 
    e.preventDefault(); 
    this.props.form.validateFields((err, values) => { 
    if (!err) { 
     console.log('Received values of form: ', values); 
     fetch('/login', { 
     method: 'POST', 
     body: values 
     }); 
    } 
    }); 
} 

, 내 값은 콘솔에 로그인합니까 볼 수 있습니다. 실제로 body-parser 미들웨어를 사용하여 req.body를 파싱했지만 몸체를 기록하려고하면 빈 객체가 생깁니다. http://prntscr.com/hsbqrd

내 코드로 무슨 일이 일어나는지 알아낼 수 있습니까?

Answer 1

요청이 다중/폼 데이터로 서버로 전송되고있다. body-parser는 multipart/form-data를 지원하지 않습니다. 실제로 POST 요청이이 형식이되도록 요구할 경우 멀더 또는 강력 함을 살펴보십시오.

Answer 2

아마도 클라이언트 측에서이 방법을 시도해야합니까? 여기

var values = { 
    username: 'test', 
    password: 'test' 
}; 

fetch("/login", { 
    method: "POST", 
    headers: { 
    'Accept': 'application/json, text/plain, */*', 
    'Content-Type': 'application/json' 
    }, 
    body: JSON.stringify(values) 
}); 

더 많은 정보 : Fetch Post JSON data

편집

나는 당신이이 같은 JSON 데이터와 bodyParser를 구성 할 수 있다고 생각 :

app.use(bodyParser.json({limit: '200mb'})); 

그것이 도움이되기를 바랍니다.

Answer 3

JQuery 스크립트를 추가하여이 Ajax 요청을 시도하고 서버를 실행했는데 문제가 서버가 아닌 요청 이었지만 HTML 요청이 좋지 않다. MDN 예제도 시도했지만 작동하지 않았다. 코드는 서버와 함께 잘 작동 :

$.post("/login", 
{ 
    name: "name", 
    pass: "password" 
}, 
function(data, status){ 
    console.log(data) 
    console.log(status) 
}); 

을이 당신이 필요로하는 스크립트입니다

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>