フォームのPOSTでヘッダーフィールドを設定する方法


95

フォームの送信時にPOSTヘッダーにカスタムフィールドを設定するにはどうすればよいですか?


1
使用XmlHttpRequestあなたが意味ですか?または単なるプレーンHTMLフォームの投稿ですか?
Aliostad 2012年

いいえ、私は、フォームのアクションを使用しています:ポスト
レザOwliaei

回答:


60

それはできません-私の知る限り。

ただし、たとえばjqueryを使用して(プレーンなJavaScriptで実行できます)、フォームをシリアル化し、カスタムヘッダーを追加しながら(AJAXを使用して)送信できます。

serializeHTML FORM form-url-encodedをPOSTの準備ができた値に変更するjquery を見てください。

更新

私の提案はどちらかを含めることです

  • 非表示のフォーム要素
  • クエリ文字列パラメーター

2
この場合、ajaxは使用できません。どういうわけか、私はaspxページに投稿およびリダイレクトしています。リダイレクトはFrom Postによって行われます。
Reza Owliaei 2012年

2
私の提案は、1)非表示のフォーム要素2)クエリ文字列パラメーター
Aliostad

1
ファイルをシリアル化できますか?私は考えた:いいえ
Fallenreaper

はい、ファイルをBase64文字列にシリアル化できます。Base64は非常に大きくなる可能性があるため、巨大なファイルの場合は非常に扱いにくくなります。しかし、すべてのシリアル化メソッドもそうです。
フェリーペ2015

それをクエリ文字列パラメーターとして追加し、ヘッダーまたはクエリ文字列が存在し、トークンがあるかどうかをサーバーで確認します。
James111

14

ページにcookie値を設定してから、サーバー側で読み取ります。

特定のヘッダーを設定することはできませんが、値はコンテンツの本文ではなく、ヘッダーセクションでアクセスできます。


3
注:追加するヘッダーがCSRF保護用である場合は、そのトークンをCookieに保存しないようにしてください。そうしないと、CSRF保護が無効になります。
Jimothy

5

FormDataドキュメントから:

XMLHttpRequestレベル2は、新しいFormDataインターフェースのサポートを追加します。FormDataオブジェクトは、フォームフィールドとその値を表すキーと値のペアのセットを簡単に構築する方法を提供します。これは、XMLHttpRequest send()メソッドを使用して簡単に送信できます。

を使用するXMLHttpRequestと、カスタムヘッダーを設定してを実行できますPOST


2

実際には、クライアント側でCookieを保存するためのより良い方法です。次に、その特定のドメインのすべてのページヘッダーとともにCookieが自動的に送信されます。

node-jsでは、cookie-parsercookieを設定して使用できます。

例:

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

これでこれにアクセスできます:

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

なお、httpOnly:trueクッキーは、通常はアクセスできない、手動またはJavaScriptを通って、それにアクセスできる唯一のブラウザであることを保証します。ヘッダーやセキュリティトークンを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)リダイレクト。それはあなたがしていることですか?
ファビオブダ

HTMLページ(ソース)にiFrameがあり、別のHTMLページ(プロキシ)を指しています。プロキシページは、フォーム要素を介していくつかのパラメータ(No Get)をポストします。リダイレクトと投稿はフォームの送信時に行われます。投稿されたパラメーターを宛先としてaspxページに取得します。
Reza Owliaei 2012年

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"
});

metaたとえば、JSPに要素を追加する必要があります。

<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.