양식 POST에서 헤더 필드를 설정하는 방법은 무엇입니까?


95

양식 제출시 POST 헤더에 사용자 정의 필드를 설정하려면 어떻게해야합니까?


1
사용하여 XmlHttpRequest무슨 뜻? 아니면 단순한 HTML FORM 게시물입니까?
Aliostad

아니, 난 형태의 액션을 사용하고 있습니다 : 포스트
레자 Owliaei

답변:


60

할 수 없습니다-AFAIK.

그러나 예를 들어 jquery (일반 자바 스크립트로 수행 할 수 있음)를 사용하여 양식을 직렬화하고 사용자 정의 헤더를 추가하는 동안 (AJAX 사용) 보낼 수 있습니다.

serializeHTML FORM form-url-encoded을 POST 준비가 된 값 으로 변경하는 jquery 를 살펴보십시오 .

최신 정보

내 제안은 다음 중 하나를 포함하는 것입니다.

  • 숨겨진 양식 요소
  • 쿼리 문자열 매개 변수

2
이 경우 ajax를 사용할 수 없습니다. 어쨌든, 나는 Post and Redirect to a aspx page. 리디렉션은 From Post에서 발생합니다.
Reza Owliaei

2
내 제안은 1) 숨겨진 양식 요소 2) 쿼리 문자열 매개 변수
Aliostad

1
파일을 직렬화 할 수 있습니까? 나는 생각했다.
Fallenreaper

예, 파일을 Base64 문자열로 직렬화 할 수 있습니다. Base64는 매우 부피가 클 수 있으므로 대용량 파일의 경우 매우 서투른 것일 수 있습니다. 그러나 모든 직렬화 방법도 마찬가지입니다.
Felype 2015

나는 그것을 쿼리 문자열 매개 변수로 추가하고 서버가 헤더 또는 쿼리 문자열이 존재하고 토큰이 있는지 확인하도록 할 것입니다.
James111

14

페이지에 쿠키 값을 설정 한 다음 서버 측에서 다시 읽습니다.

특정 헤더를 설정할 수 없지만 콘텐츠 본문이 아닌 헤더 섹션에서 값에 액세스 할 수 있습니다.


3
참고 : 추가하려는 헤더가 CSRF 보호 용인 경우 해당 토큰을 쿠키에 저장 하지 않도록 하십시오. 그렇지 않으면 CSRF 보호가 무효화됩니다.
Jimothy

5

에서 FormData documention :

XMLHttpRequest Level 2는 새로운 FormData 인터페이스에 대한 지원을 추가합니다. FormData 개체는 양식 필드와 해당 값을 나타내는 키 / 값 쌍 집합을 쉽게 구성 할 수있는 방법을 제공합니다. 그런 다음 XMLHttpRequest send()메서드를 사용하여 쉽게 보낼 수 있습니다 .

를 사용 XMLHttpRequest하여 사용자 지정 헤더를 설정 한 다음 POST.


2

사실 클라이언트 측에 쿠키를 저장하는 더 좋은 방법입니다. 그런 다음 해당 특정 도메인의 모든 페이지 헤더와 함께 쿠키가 자동으로 전송됩니다.

node-js에서는 쿠키 파서쿠키를 설정하고 사용할 수 있습니다. .

예 :

res.cookie('token', "xyz....", { httpOnly: true });

이제이 항목에 액세스 할 수 있습니다.

app.get('/',function(req, res){
 var token = req.cookies.token
});

참고 httpOnly:true쿠키는 일반적으로 액세스 할 수 없습니다 수동 또는 자바 스크립트를 통해 액세스 할 수 있습니다 만 브라우저되도록합니다. ajax를 통하지 않고 양식 게시물로 일부 헤더 또는 보안 토큰을 보내려는 경우 대부분의 경우 이것은 안전한 방법으로 간주 될 수 있습니다. 일반적으로 중요한 사용자 관련 정보를 저장하는 경우 데이터가 보안 프로토콜 / ssl을 통해 전송되는지 확인하십시오.


1

내가 펍 / 제이드에서 한 일입니다.

extends layout
block content
    script(src="/jquery/dist/jquery.js")
    script.
      function doThePost() {
        var jqXHR = $.ajax({ 
            type:'post'
            , url:<blabla>
            , headers: { 
                'x-custom1': 'blabla'
                , 'x-custom2': 'blabla'
                , 'content-type': 'application/json'
            }
            , data: {
                'id': 123456, blabla
            }
        })
        .done(function(data, status, req) { console.log("done", data, status, req); })
        .fail(function(req, status, err) { console.log("fail", req, status, err); });
      }
    h1= title
    button(onclick='doThePost()') Click


0

$ .ajax를 사용하여 <form method="POST">. 예를 들어 제출 버튼에 이벤트를 추가하고 POST 요청을 AJAX로 처리 할 수 ​​있습니다.


2
이 양식 제출을 사용 하여 aspx 페이지 로 리디렉션 하고 일부 데이터를 게시합니다.
Reza Owliaei

더 잘 이해할 수 있도록 : 1) 사용자 게시물 2) 데이터 저장 3) 리디렉션. 당신이하는 일입니까?
Fabio Buda

다른 html 페이지 (프록시)를 가리키는 Html 페이지 (소스)에 iFrame이 있습니다. 프록시 페이지는 양식 요소를 통해 일부 매개 변수 (Get 없음)를 게시합니다. 리디렉션 및 게시는 양식 제출시 발생합니다. aspx 페이지에서 게시 된 매개 변수를 대상으로 검색합니다.
Reza Owliaei

0

모든 ajax 요청에 추가하기 위해 https://stackoverflow.com/a/58964440/1909708에서 답변했습니다.


특정 ajax 요청에 추가하려면 다음과 같이 구현했습니다.

var token_value = $("meta[name='_csrf']").attr("content");
var token_header = $("meta[name='_csrf_header']").attr("content");
$.ajax("some-endpoint.do", {
 method: "POST",
 beforeSend: function(xhr) {
  xhr.setRequestHeader(token_header, token_value);
 },
 data: {form_field: $("#form_field").val()},
 success: doSomethingFunction,
 dataType: "json"
});

추가해야합니다 metaJSP에 요소를 . 예 :

<html>
<head>        
    <!-- default header name is X-CSRF-TOKEN -->
    <meta name="_csrf_header" content="${_csrf.headerName}"/>
    <meta name="_csrf" content="${_csrf.token}"/>

양식 제출 (동기) 요청에 추가하려면 여기에서 답변했습니다 : https://stackoverflow.com/a/58965526/1909708

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.