Bagaimana cara mengatur field Header pada formulir POST?

96

Bagaimana cara mengatur bidang kustom di header POST saat mengirimkan formulir?

javascript html post http-post httprequest Reza Owliaei
sumber
1
Menggunakan XmlHttpRequestmaksudmu? Atau hanya posting FORMULIR HTML biasa?
Aliostad
tidak, saya menggunakan form action: post
Reza Owliaei
kemungkinan duplikat tajuk Permintaan HTTP Khusus dalam HTML
James Drinkard

Jawaban:

60

Itu tidak bisa dilakukan - AFAIK.

Namun Anda dapat menggunakan misalnya jquery (meskipun Anda dapat melakukannya dengan javascript biasa) untuk membuat serialisasi formulir dan mengirim (menggunakan AJAX) sambil menambahkan tajuk kustom Anda.

Lihat jquery serializeyang mengubah FORMULIR HTML menjadi form-url-encodednilai yang siap untuk POST.

MEMPERBARUI

Saran saya adalah memasukkan keduanya

  • elemen bentuk tersembunyi
  • parameter string kueri
Aliostad
sumber
2
Saya tidak bisa menggunakan ajax dalam kasus ini. Entah bagaimana, saya Posting dan Redirect ke halaman aspx. Pengalihan terjadi melalui Dari Pos.
Reza Owliaei
2
Saran saya adalah menyertakan 1) elemen bentuk tersembunyi 2) parameter string kueri
Aliostad
1
Bisakah Anda membuat file bersambung? Saya pikir: Tidak.
Fallenreaper
Ya, Anda dapat membuat serialisasi file menjadi string Base64, mungkin sangat canggung untuk file besar karena Base64 bisa sangat besar. Tapi begitu juga setiap metode serialisasi.
Felype
Saya hanya menambahkannya sebagai parameter string kueri & meminta server Anda memeriksa untuk melihat apakah ada header atau string kueri dan memiliki token.
Yakobus111
14

Tetapkan nilai cookie di halaman, lalu baca kembali di sisi server.

Anda tidak akan dapat menyetel tajuk tertentu, tetapi nilainya akan dapat diakses di bagian tajuk dan bukan isi konten.

Chris Hynes
sumber
3
Catatan: Jika header yang ingin Anda tambahkan adalah untuk proteksi CSRF, pastikan Anda tidak menyimpan token itu di cookie, atau Anda akan mengalahkan proteksi CSRF.
Jimothy
5

Dari dokumentasi FormData :

XMLHttpRequest Level 2 menambahkan dukungan untuk antarmuka FormData baru. Objek FormData menyediakan cara untuk dengan mudah membuat satu set pasangan kunci / nilai yang mewakili bidang formulir dan nilainya, yang kemudian dapat dengan mudah dikirim menggunakan XMLHttpRequest send()metode.

Dengan XMLHttpRequestAnda dapat mengatur tajuk khusus dan kemudian melakukan POST.

Majid
sumber
2

Sebenarnya cara yang lebih baik untuk melakukannya adalah dengan menyimpan cookie di sisi klien. Kemudian cookie secara otomatis dikirim dengan setiap header halaman untuk domain tersebut.

Di node-js, Anda dapat menyiapkan dan menggunakan cookie dengan cookie-parser .

sebuah contoh:

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

Sekarang Anda dapat mengakses ini: 

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

Perhatikan bahwa httpOnly:truememastikan bahwa cookie biasanya tidak dapat diakses secara manual atau melalui javascript dan hanya browser yang dapat mengaksesnya. Jika Anda ingin mengirim beberapa header atau token keamanan dengan formulir posting, dan tidak melalui ajax, dalam banyak situasi ini dapat dianggap sebagai cara yang aman. Meskipun pastikan bahwa data dikirim melalui protokol aman / ssl jika Anda menyimpan beberapa info terkait pengguna yang sensitif yang biasanya terjadi.

Ramesh Pareek
sumber
1

Inilah yang saya lakukan di pub / giok

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
Steve
sumber
1

Jika Anda menggunakan JQuery dengan plugin Formulir, Anda dapat menggunakan:

$('#myForm').ajaxSubmit({
    headers: {
        "foo": "bar"
    }
});

Sumber: https://stackoverflow.com/a/31955515/9469069

sm7
sumber
0

Anda dapat menggunakan $ .ajax untuk menghindari perilaku alami <form method="POST">. Anda dapat, misalnya, menambahkan acara ke tombol pengiriman dan memperlakukan permintaan POST sebagai AJAX.

Fabio Buda
sumber
2
Saya menggunakan formulir ini untuk mengarahkan ke halaman aspx dan memposting beberapa data.
Reza Owliaei
buat saya lebih memahami: 1) posting pengguna 2) menyimpan data 3) mengarahkan ulang. Apa yang kamu lakukan?
Fabio Buda
Saya memiliki iFrame di halaman Html (Sumber), mengarah ke halaman html lain (Proxy). Halaman proxy memposting beberapa parameter (No Get) melalui elemen formulir. Pengalihan dan pengeposan terjadi pada pengiriman formulir. Saya mengambil parameter yang diposting di halaman aspx sebagai tujuan.
Reza Owliaei
0

Untuk menambah setiap permintaan ajax, saya telah menjawabnya di sini: https://stackoverflow.com/a/58964440/1909708

Untuk menambahkan ke dalam permintaan ajax tertentu, ini 'bagaimana saya mengimplementasikan:

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

Anda harus menambahkan metaelemen di JSP, misalnya

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

Untuk menambah permintaan pengiriman formulir (sinkron), saya telah menjawabnya di sini: https://stackoverflow.com/a/58965526/1909708

Himadri Pant
sumber