programing

Express에서 POST 양식 필드에 액세스하는 방법

kingscode 2023. 1. 22. 22:43
반응형

Express에서 POST 양식 필드에 액세스하는 방법

간단한 폼은 다음과 같습니다.

<form id="loginformA" action="userlogin" method="post">
    <div>
        <label for="email">Email: </label>
        <input type="text" id="email" name="email"></input>
    </div>
<input type="submit" value="Submit"></input>
</form>

다음은 Express.js/Node.js 코드입니다.

app.post('/userlogin', function(sReq, sRes){    
    var email = sReq.query.email.;   
}

는 는 i i는노노 i i i i i.sReq.query.email ★★★★★★★★★★★★★★★★★」sReq.query['email'] ★★★★★★★★★★★★★★★★★」sReq.params['email'] 돌아오다undefined

Get call로 변경하면 동작하기 때문에..감 잡히는 게 없어요?

Express 4.16.0을 기점으로 상황이 다시 바뀌었습니다.사용할 수 있게 되었습니다.express.json() ★★★★★★★★★★★★★★★★★」express.urlencoded()Express 3.0에서처럼요.

이는 Express 4.0에서 4.15로 시작하는 경우다릅니다.

$ npm install --save body-parser

그 후:

var bodyParser = require('body-parser')
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
})); 

나머지는 Express 3.0과 같습니다.

먼저 본문의 포스트 데이터를 해석하기 위해 미들웨어를 추가해야 합니다.

다음 코드 행 중 하나 또는 모두를 추가합니다.

app.use(express.json());       // to support JSON-encoded bodies
app.use(express.urlencoded()); // to support URL-encoded bodies

그런 다음 핸들러에서 개체를 사용합니다.

// assuming POST: name=foo&color=red            <-- URL encoding
//
// or       POST: {"name":"foo","color":"red"}  <-- JSON encoding

app.post('/test-page', function(req, res) {
    var name = req.body.name,
        color = req.body.color;
    // ...
});

의 사용은 권장되지 않습니다.

app.use(express.bodyParser());

...는 다음과 같습니다.

app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart());

에 관한 .express.multipart()따라서 필요한 특정 인코딩유형에 대한 지원을 명시적으로 추가하는 것이 좋습니다.멀티파트 인코딩이 필요한 경우(예를 들어 파일 업로드를 지원하기 위해) 읽어보십시오.

express를 사용한 보안 문제.bodyParser()

외 은 현재 입니다.express.bodyParser()라고 하는 은, 는, , 三ware, 三ware, 三ware, 三ware, 三ware, 三ware, 三ware, 三ware, 三ware, 三ware, 三ware,express.json(),express.urlencoded() , , , , 입니다.express.multipart()미들웨어(http://expressjs.com/api.html#bodyParser))를 참조해 주세요.폼 요구 본문의 해석은 에 의해 행해집니다.express.urlencoded()입니다.req.body★★★★★★ 。

보안상의 문제로 인해express.multipart()/connect.multipart()업로드된 모든 파일(및 가비지 수집되지 않음)의 임시 파일을 만듭니다.이 시점에서, 에서는, 다음의 파일을 사용하지 않는 것을 추천합니다.express.bodyParser()대신 필요한 미들웨어만 사용합니다.

★★★★★★connect.bodyParser()를 포함하도록 곧 갱신될 예정입니다.urlencoded ★★★★★★★★★★★★★★★★★」json(Express) 3.0을 연결합니다.


한마디로...

app.use(express.bodyParser());

...사용할 필요가 있습니다.

app.use(express.urlencoded());
app.use(express.json());      // if needed

멀티파트 폼(파일 업로드)을 취급할 필요가 있는 경우는, 서드파티제 라이브러리나 멀티파티제, 버스보이, 다이서등의 미들웨어를 사용해 주세요.

주의: 이 답변은 Express 2에 대한 답변입니다.Express 3에 대해서는, 여기를 참조해 주세요.

connect/express를 사용하는 경우 bodyParser 미들웨어를 사용해야 합니다.Expressjs 가이드에 설명되어 있습니다.

// example using express.js:
var express = require('express')
  , app = express.createServer();
app.use(express.bodyParser());
app.post('/', function(req, res){
  var email = req.param('email', null);  // second parameter is default
});

다음은 원래 연결 전용 버전입니다.

// example using just connect
var connect = require('connect');
var url = require('url');
var qs = require('qs');
var server = connect(
  connect.bodyParser(),
  connect.router(function(app) {
    app.post('/userlogin', function(req, res) {
      // the bodyParser puts the parsed request in req.body.
      var parsedUrl = qs.parse(url.parse(req.url).query);
      var email = parsedUrl.email || req.body.email;;
    });
  })
);

쿼리 문자열과 본문 모두 로우 레벨 라이브러리가 아닌 레일즈 스타일의 매개변수 처리()qs사용하여 구문 분석됩니다.반복된 파라미터를 해석하려면qs괄호가 name[]=val1&name[]=val2맵을 합니다. 또한 네스트된 맵도 지원합니다.bodyParser HTML sonsonJSON 。

편집: express.js를 읽고 Express 사용자에게 보다 자연스러운 답변을 수정했습니다.

이렇게 하면 미들웨어 없이 게시된 쿼리를 빌드할 수 있습니다.

app.post("/register/",function(req,res){
    var bodyStr = '';
    req.on("data",function(chunk){
        bodyStr += chunk.toString();
    });
    req.on("end",function(){
        res.send(bodyStr);
    });

});

그러면 브라우저로 전송됩니다.

email=emailval&password1=pass1val&password2=pass2val

그러나 미들웨어를 사용하는 것이 좋을지도 모르기 때문에 각 경로마다 여러 번 쓸 필요는 없습니다.

Express 4 사용자용 주의사항:

만약 당신이 노력한다면app.use(express.bodyParser());표현하다

오류: 대부분의 미들웨어(bodyParser 등)는 Express에 번들되지 않으므로 별도로 설치해야 합니다.https://github.com/senchalabs/connect#middleware 를 참조해 주세요.

를 설치해야 body-parsernpm과는 별도로 다음과 같은 것을 사용합니다(예: GitHub 페이지에서 참조).

var express    = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser());

app.use(function (req, res, next) {
  console.log(req.body) // populated!
  next();
})

특정 형식:

<form action='/somepath' method='post'>
   <input type='text' name='name'></input>
</form>

express 사용

app.post('/somepath', function(req, res) {

    console.log(JSON.stringify(req.body));

    console.log('req.body.name', req.body['name']);
});

출력:

{"name":"x","description":"x"}
req.param.name x

백엔드:

import express from 'express';
import bodyParser from 'body-parser';

const app = express();
app.use(bodyParser.json()); // add a middleware (so that express can parse request.body's json)

app.post('/api/courses', (request, response) => {
  response.json(request.body);
});

프런트 엔드:

fetch("/api/courses", {
  method: 'POST',
  body: JSON.stringify({ hi: 'hello' }), // convert Js object to a string
  headers: new Headers({ "Content-Type": "application/json" }) // add headers
});
app.use(express.bodyParser());

그럼 다음에app.post을 할 수 req.body.{post request variable}.

Express 4.4.1 업데이트

Express에서 다음 미들웨어가 제거되었습니다.

  • 본문 파서
  • json
  • urlencoded의
  • 멀티파트

express 3.0과 같이 미들웨어를 직접 사용하는 경우.다음의 에러가 표시됩니다.

Error: Most middleware (like urlencoded) is no longer bundled with Express and 
must be installed separately.


이러한 미들웨어를 이용하려면 각 미들웨어에 대해 npm을 개별적으로 수행해야 합니다.

bodyParser는 권장되지 않는 것으로 표시되어 있기 때문에 json, urlencode, multiparty와 같이 multipart parcer를 사용하여 다음과 같은 방법을 권장합니다.(멀티파트 미들웨어도 권장되지 않습니다).

또한 urlencode + json을 정의하는 것만으로 폼 데이터는 해석되지 않고 req.body는 정의되지 않습니다.멀티파트 요청을 처리하는 미들웨어를 정의해야 합니다.

var urlencode = require('urlencode');
var json = require('json-middleware');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

app.use(json);
app.use(urlencode);
app.use('/url/that/accepts/form-data', multipartMiddleware);

갱신하다

의 경우Express version 4.16+자체 body-parser 구현이 기본 Express 패키지에 포함되므로 다른 종속성을 다운로드할 필요가 없습니다.

코드에 다음과 같은 행을 추가했을 수 있습니다.

app.use(bodyparser.json()); //utilizes the body-parser package

Express 4.16+ 를 사용하고 있는 경우는, 그 회선을 다음과 같이 치환할 수 있습니다.

app.use(express.json()); //Used to parse JSON bodies

express.json()의 코드는 bodyparser.json()을 기반으로 하기 때문에 이로 인해 어플리케이션에 브레이크 변경은 발생하지 않습니다.

사용자 환경에 다음 코드도 있는 경우:

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

다음 항목으로 대체할 수 있습니다.

app.use(express.urlencoded()); //Parse URL-encoded bodies

다음 중 하나:까지도 아주 .body-parser도 모르나 없다Express보디파서

(자세한 내용은 expressjs/bodyparser에 있는 문서를 참조하십시오).

나는 이 문제를 정확히 찾고 있었다.위의 모든 조언을 따랐지만 여전히 빈 개체 {}을(를) 반환하고 있었습니다.제 경우 html이 틀리는 것처럼 단순한 것이었습니다.

html에서 html을 사용하고 합니다.'name'뿐만 아니라 태그로 합니다.'id'이치노

<input id='foo' type='text' value='1'/>             // req = {}
<input id='foo' type='text' name='foo' value='1' /> // req = {foo:1}

내 바보같은 실수는 너에게 이득이야.

Express 4.1 이후

대부분의 답변이 Express, bodyParser, connect에 사용되고 있기 때문에 multipart는 사용되지 않습니다.멀티파트 후 객체를 쉽게 전송할 수 있는 안전한 방법이 있습니다.

multer는 connect.multipart()의 대체품으로 사용할 수 있습니다.

패키지를 설치하려면

$ npm install multer

앱에 로드:

var multer = require('multer');

그런 다음 미들웨어 스택에 다른 양식 구문 분석 미들웨어와 함께 추가합니다.

app.use(express.json());
app.use(express.urlencoded());
app.use(multer({ dest: './uploads/' }));

connect.json()은 응용 프로그램/json을 처리합니다.

connect.urlencoded()는 응용 프로그램/x-www-form-urlencoded 를 처리합니다.

multer()는 멀티파트/폼데이터를 처리합니다.

app.use(express)사용하면 안 됩니다.bodyParser()).BodyParser는 json + urlencoded + mulitpart의 조합입니다.connect 3.0에서는 멀티파트가 삭제되므로 사용하지 마십시오.

이 문제를 해결하려면 다음 작업을 수행합니다.

app.use(express.json());
app.use(express.urlencoded());

app.use(app.router)는 json 뒤에 urlencoded를 사용해야 합니다.그렇지 않으면 동작하지 않습니다.

Express v4.17.0

app.use(express.urlencoded( {extended: true} ))

app.post('/userlogin', (req, res) => {    

   console.log(req.body) // object

   var email = req.body.email;

}

express.url 인코딩 완료

데모 폼

다른 답변 관련

스트리밍 요청이 성공했습니다.

req.on('end', function() {
    var paramstring = postdata.split("&");
});

var postdata = "";
req.on('data', function(postdataChunk){
    postdata += postdataChunk;
});

Express 버전 4.16으로 작성

에서는, 「」를 사용할 수 .req.bodypost 에 액세스 .를 들어, 이것이 「」의 , 「」의 경우입니다.POST이치노

function(req,res){
      res.send(req.body);

      //req.body.email would correspond with the HTML <input name="email"/>
}

PHP에P.P.P.에.S: PHP s s s s s s$_GET use use 'the variable()'req.queryPHP에 $_POST use use 'the variable()'req.bodyNode.js는 Node.js를 사용합니다.

POST 요청과 GET 요청 모두에 다음 코드를 사용하여 모든 파라미터를 찾을 수 있었습니다.

var express = require('express');
var app = express();
const util = require('util');
app.post('/', function (req, res) {
    console.log("Got a POST request for the homepage");
    res.send(util.inspect(req.query,false,null));
})

공식 문서 버전 4에서

const express = require('express')
const app = express()
app.use(express.json());
app.use(express.urlencoded({ extended: true })) 

app.post('/push/send', (request, response) => {
  console.log(request.body)
})
var express        =         require("express");
var bodyParser     =         require("body-parser");
var app            =         express();

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

app.get('/',function(req,res){
  res.sendfile("index.html");
});
app.post('/login',function(req,res){
  var user_name=req.body.user;
  var password=req.body.password;
  console.log("User name = "+user_name+", password is "+password);
  res.end("yes");
});
app.listen(3000,function(){
  console.log("Started on PORT 3000");
})

Post 파라미터는 다음과 같이 취득할 수 있습니다.

app.post('/api/v1/test',Testfunction);
http.createServer(app).listen(port, function(){
    console.log("Express server listening on port " + port)
});

function Testfunction(request,response,next) {
   console.log(request.param("val1"));
   response.send('HI');
}

express-fileupload 패키지 사용:

var app = require('express')();
var http = require('http').Server(app);
const fileUpload = require('express-fileupload')

app.use(fileUpload());

app.post('/', function(req, res) {
  var email = req.body.email;
  res.send('<h1>Email :</h1> '+email);
});

http.listen(3000, function(){
  console.log('Running Port:3000');
});

사용하고 있습니다.req.query.post 방법으로req.query.post와 with with with with method=get,method=post바디 파서와 연동됩니다.

투고를 변경하여 다음 정보를 얻을 수 있습니다.

<form id="loginformA" action="userlogin" method="get">
<div>
    <label for="email">Email: </label>
    <input type="text" id="email" name="email"></input>
</div>
<input type="submit" value="Submit"></input>  
</form>

익스프레스 코드에서는 'app.get'을 사용합니다.

다른 답변에서는 서버 측에서 사용하는 미들웨어에 대해 설명합니다.제 답변은 개발자들에게 문제를 직접 디버깅할 수 있는 간단한 플레이북을 제공하는 것입니다.


이 질문의 상황은 다음과 같습니다.

  • 클라이언트 측에 양식이 있습니다.
  • [ ]되며 JavaScript를 요청을 [Submit]는 없습니다).버튼을 클릭하여 전송되며 JavaScript를 사용하여 요청을 전송하지 않습니다(따라서,fetch,axios,xhr, 는 나중에 할 수 .)그러나, 이러한 케이스에 대해서는, 나중에 솔루션을 확장할 수 있습니다.)
  • 서버 측에서는 Express를 사용합니다.
  • 익스프레스 코드의 데이터에 액세스할없습니다. req.bodyundefined

사용자가 직접 솔루션을 찾기 위해 수행할 수 있는 몇 가지 작업이 있습니다.

  1. 네트워크 탭을 열고 요청을 검색합니다.
  2. 요청 헤더를 확인합니다.이 상황(양식 제출)에서는 헤더는 아마application/x-www-form-urlencoded ★★★★★★★★★★★★★★★★★」multipart/form-data(「」가 있는 경우)enctype="multipart/form-data"되어 있습니다.
  3. 적절한 미들웨어를 사용하여 수신 요청을 해석하는 경우 Express 코드를 확인합니다.
  • 이 Content-Type인 application/x-www-form-urlencoded ㅇㅇㅇ, ㅇㅇ가 돼요.app.use(express.urlencoded({extended: true}))당신의 코드로.

  • 이 Content-Type인 multipart/form-data을 구문 할 수 를 사용해야 Express에는 이러한 요청을 해석하기 위한 내장 미들웨어가 없기 때문에 다른 라이브러리를 사용해야 합니다. multer좋은 것 같아요.

  1. , 이 자료에 할 수 .req.body:) 구문에 문제가 있는 경우 [Express document]페이지를 확인해 주세요.이 질문은 오래 전에 게시되었기 때문에 구문이 변경될 수 있습니다.

이제 이 간단한 플레이북을 JavaScript 코드와 관련된 다른 케이스로 확장할 수 있습니다.콘텐츠 타입을 선택합니다.「」가 application/json 이렇게 써야 돼요.app.use(express.json())당신의 코드로.

요약하면 요청 Content-Type을 찾은적절한 미들웨어를 사용하여 해석합니다.

HTML 양식에서 POST 방법을 사용하는 경우 서버 측의 req.body에서 데이터를 가져와야 합니다.Node.js. 및 추가

var bodyParser = require('body-parser')
app.use( bodyParser.json() );    
app.use(bodyParser.urlencoded({extended: false}));

또는

method=' 사용HTML로 GET하고 데이터를 캡처합니다.서버측에서 쿼리를 실행합니다.Node.js

언급URL : https://stackoverflow.com/questions/5710358/how-to-access-post-form-fields-in-express

반응형