'When auto-submitting a form, how do I add a header?

I’m using JQuery 1.9.2, although this question might not concern JQuery. I’m auto-submitting an HTML form using this code …

<script type="text/javascript">
    $(function() {
        $('#autolaunch').submit(); 
    }); 
</script>
…
<form id="autolaunch" name="autolaunch" action="${ltiLaunchUrl}" method="post">
    <input type="hidden" name="lti_version" value="${lti_version}" />
    <input type="hidden" name="lti_message_type" value="${lti_message_type}" />
    …
    <input type="hidden" name="lis_person_name_given" value="${lis_person_name_given}" />
</form>

The action of the form is a different domain than the server on which this page is accessed. My question is, how can I add a header when submitting this data? The header I want to add would look like name = "LTI-Authorization" and value = “Token consumerKey:consumerSecret”.



Solution 1:[1]

you cannot add a header to a form.

Instead of header add a new hidden input.

<input type="hidden" name="LTI-Authorization" value="Token consumerKey:consumerSecret" />

You can add header by using ajax request or XHR.

$.ajax({
    type: 'POST',
    url: url,
    headers: {
        "LTI-Authorization":"Token consumerKey:consumerSecret"
    },
    data: {
       "lti_version":"${lti_version}" // all other data
    }
}).done(function(data) { 
    alert(data); 
});

Solution 2:[2]

You can add a header in Jquery just that needs taking a handle of the javascript XMLHttpRequest object while you do a Jquery form submit. I have answered the same question here. You'd be doing something like this:

xhttp.open("POST", "/v1/target-endpoint.do", true);
xhttp.setRequestHeader("custom_header", "test value of custom header");
xhttp.send($("#custom_form").serialize());

where xhttp is your XMLHttpRequest object.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Himadri Pant