Custom Request Headers
Send static headers (e.g., auth tokens) with every upload request.
(function() {
new MultipleUpload('#demo', {
uploadUrl: '/api/upload',
multiple: true,
headers: {
'Authorization': 'Bearer my-jwt-token-here',
'X-Custom-Header': 'custom-value'
}
});
})();
Headers on the requests the component makes
headers defaults to an empty object. Whatever you put in it is applied to the upload requests, which is how a bearer token, an API key or a tenant identifier travels with the file. Reach for this before withCredentials: it works cross-origin without cookies, and without the server having to allow credentialed requests.
What a custom header costs
Any header outside the small CORS-safelisted set makes a cross-origin upload preflighted, so the browser sends an OPTIONS request first and your server must answer it with that header named in Access-Control-Allow-Headers. A missing preflight response is the usual reason an upload that works same-origin fails the moment it crosses origins.
A token in a header is visible to anyone with the page open. Issue short-lived, narrowly scoped tokens, and never put a long-lived secret here.