【问题标题】：How to set a Header field on POST a form?如何在 POST 表单上设置 Header 字段？
【发布时间】：2012-03-19 23:40:19
【问题描述】：

如何在提交表单时在 POST 标头中设置自定义字段？

【问题讨论】：

你的意思是使用XmlHttpRequest？还是只是一个普通的 HTML FORM 帖子？
不，我正在使用表单操作：发布
Custom HTTP Request headers in HTML 的可能重复项

标签： javascript html post http-post httprequest

【解决方案1】：

这是不可能的 - AFAIK。

但是，您可以使用例如 jquery（尽管您可以使用纯 javascript）来序列化表单并发送（使用 AJAX），同时添加您的自定义标题。

查看 jquery serialize，它将 HTML FORM 更改为 form-url-encoded 值，准备 POST。

更新

我的建议是包括任一

一个隐藏的表单元素
查询字符串参数

【讨论】：

在这种情况下我不能使用 ajax。不知何故，我发布并重定向到一个 aspx 页面。重定向是由 From Post 发生的。
我的建议是包括 1) 隐藏的表单元素 2) 查询字符串参数
你能序列化文件吗？我想：不。
是的，您可以将文件序列化为 Base64 字符串，对于大文件可能非常笨拙，因为 Base64 可能非常庞大。但是每个序列化方法也是如此。
我只需将其添加为查询字符串参数并让您的服务器检查是否存在标头或查询字符串并具有令牌。

【解决方案2】：

在页面上设置一个cookie值，然后在服务器端读回。

您将无法设置特定的标头，但可以在标头部分而不是内容正文中访问该值。

【讨论】：

注意：如果您要添加的标头用于 CSRF 保护，请确保您不将该令牌存储在 cookie 中，否则您将破坏 CSRF 保护。

【解决方案3】：

来自FormData文档：

XMLHttpRequest Level 2 增加了对新的 FormData 接口的支持。 FormData 对象提供了一种方法来轻松构造一组表示表单字段及其值的键/值对，然后可以使用XMLHttpRequestsend() 方法轻松发送。

使用XMLHttpRequest，您可以设置自定义标题，然后执行POST。

【讨论】：

【解决方案4】：

事实上，在客户端保存 cookie 是一种更好的方法。然后 cookie 会自动与该特定域的每个页面标题一起发送。

在 node-js 中，您可以通过cookie-parser 设置和使用 cookie。

一个例子：

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

现在你可以访问这个了：

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

请注意，httpOnly:true 确保 cookie 通常无法手动或通过 javascript 访问，并且只有浏览器才能访问它。如果您想通过表单发布而不是通过 ajax 发送一些标题或安全令牌，在大多数情况下这可以被认为是一种安全的方式。尽管如果您要存储一些敏感的用户相关信息（通常是这种情况），请确保通过安全协议 /ssl 发送数据。

【讨论】：

【解决方案5】：

这是我在 pub/jade 中所做的

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

【讨论】：

【解决方案6】：

您可以使用 $.ajax 来避免 <form method="POST"> 的自然行为。例如，您可以向提交按钮添加一个事件，并将 POST 请求视为 AJAX。

【讨论】：

我使用这个表单提交重定向到一个aspx页面并发布一些数据。
让我更好地理解：1) 用户帖子 2) 保存数据 3) 重定向。是你做的吗？
我在一个 Html 页面（源）中有一个 iFrame，指向另一个 html 页面（代理）。代理页面通过表单元素发布一些参数（No Get）。重定向和发布发生在表单提交上。我在 aspx 页面中检索发布的参数作为目标。

【解决方案7】：

要添加到每个 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"
});

您必须在 JSP 中添加 meta 元素，例如

<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

【讨论】：

【解决方案8】：

如果你使用 JQuery 和 Form 插件，你可以使用：

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

来源：https://stackoverflow.com/a/31955515/9469069

【讨论】：