I am trying to send a post request using Javascript, but the problem is that I do not seem to be able to add custom headers to the request.
The request that I want to send:
OPTIONS /startScan?domain=asite.com&user=38 HTTP/2
Host: MYHOST
Accept: */*
Access-Control-Request-Method: POST
Authorization: A_TOKEN
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-Fetch-Dest: empty
Referer: http://localhost/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
note that MYHOST and A_TOKEN are in my case other values, but replaced them for security reasons.
The request that I send:
OPTIONS /startScan?domain=asite.comm&user=38 HTTP/2
Host: MYHOST
Accept: */*
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,content-type
Origin: http://localhost
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.54 Safari/537.36
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
Sec-Fetch-Dest: empty
Referer: http://localhost/
Accept-Encoding: gzip, deflate
Accept-Language: en-US,en;q=0.9
The code that I use to send this:
var data = JSON.stringify({
"domain": "asite.com",
"user": 38
});
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.addEventListener("readystatechange", function() {
if(this.readyState === 4) {
console.log(this.responseText);
}
});
xhr.open("POST", "MYHOST/startScan?domain=asite.com&user=38");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "A_TOKEN");
xhr.send(data);
The problem:
The problem now is that I am not able to add a custom header to this request. Instead of adding a header that is called Authorization I add a Access-Request-Control-Header which has authorization as value. I have tried using jQuery, XHR (as you can see) and Fetch, but no success with all of them.
Can anyone help me?
Related
I send a request with javaScript. If I send it this way
var request = new XMLHttpRequest();
request.open("POST",/*some url*/);
/*here's nothing*/
request.addEventListener('load', function(event) {/*some magic*/});
request.send();
Chrome shows me this request headers as sent:
:authority: <some data>
:method: POST
:path: /
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: de-DE,de;q=0.9,en-US;q=0.8,en;q=0.7
content-length: 0
origin: <some data>
referer: <some data>
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-site
user-agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
If I try to add another header (by replacing /here's nothing/ with
request.setRequestHeader("auth", "token");
the request header sent seems to loose some data. It now consists of:
auth: token
Referer: <some data>
sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="96", "Google Chrome";v="96"
sec-ch-ua-mobile: ?0
sec-ch-ua-platform: "Windows"
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Safari/537.36
The "origin" get's lost, but I need it for my CORS handling. So why the hell does it get lost?
Any ideas appreciated
Thnaks #John for leading me this way:
Actually, XMLHttpRequest or fetch doesn't matter. But the fetch documentation lead me the right way.
The problem was, that my sever answered the "OPTIONS" request with a http 400, what messed up preflight. I adjusted it, so it handles CORS at an OPTIONS request correctly and sends it with a HTTP 200 and now everything works smoothly.
I have a react application connecting to a Spring Boot backend application, I use JWT to authorize the user at the backend. I am using fetch to make the calls between the front and backend.
Whenever I try to set the headers of the call all the headers get removed including the Cookie (which contains the JWT). I need to set the headers to specify the content-type of the request.
- Call when I do not set the headers (causing 415)
fetch code:
return fetch(`${urlApiGateway}${url}`, {
method: "POST",
body: body,
credentials: "include",
})
Call:
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,nl-NL;q=0.8,nl;q=0.7
Connection: keep-alive
Content-Length: 13
content-type: text/plain;charset=UTF-8
Cookie: Authorization=Bearer_eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJjYXNwZXIubS50b3JlbjJAZ21haWwuY29tIiwiZXhwIjoxNjI1NDg2MzAzLCJpYXQiOjE2MjUzOTk5MDMsInVzZXIiOnsiaWQiOjIsIm5hbWUiOiJjYXNwZXIiLCJlbWFpbCI6ImNhc3Blci5tLnRvcmVuMkBnbWFpbC5jb20iLCJwYXNzd29yZCI6IiIsInBlcm1pc3Npb25zIjoiQURNSU4ifX0.JdW1M7d8HB71yvP7dupomN-bgD_484HHbxmfnOOmvqM
Host: localhost:8080
Origin: http://localhost:3000
Referer: http://localhost:3000/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
sec-ch-ua-mobile: ?0
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
As you can see the headers are present like 'content-type' and 'Cookie'.
- Call when I do set the headers to prevent 415
fetch code:
return fetch(`${urlApiGateway}${url}`, {
method: "POST",
body: body,
headers: { "Content-Type": "application/json" },
credentials: "include",
})
Call:
It seems to be making 4 call, 2 with the previous fetch settings which where the same (no headers set).
2 of the calls look like this
Provisional headers are shown
content-type: application/json
Referer: http://localhost:3000/
sec-ch-ua: " Not;A Brand";v="99", "Google Chrome";v="91", "Chromium";v="91"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
and 2 look like this
Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9,nl-NL;q=0.8,nl;q=0.7
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8080
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36
Where, as you can see, the headers are gone including the Cookie and content-type.
- Spring boot cors
#Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins(allowOrigin, "http://localhost:3000")
.allowCredentials(true)
.allowedHeaders("*")
.allowedMethods("GET", "POST", "OPTIONS");
}
I hope someone can help :)
You must pass Authorization Bearer token as header. Try this:
let yourAuthToken = .... // get bearer token from where you store it
return fetch(`${urlApiGateway}${url}`, {
method: "POST",
body: body,
headers: {
'Authorization' : 'Bearer ' + yourAuthToken
}
})
It hadn't anything to do with the js code, it was my cors settings on the backend side. My authorization filter was also being applied to the OPTIONS request which caused a cors error (no http ok status), after changing this it was fixed.
Thank you to all who tried to help me.
The following code is used to connect to an API and get data.
function req() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://url/api");
xhr.setRequestHeader("Accept", "*");
xhr.setRequestHeader("uid", "1234");
xhr.setRequestHeader("x-api-key", "1234");
xhr.send();
}
The function is called via a button
The API is confirmed working with postman. Firefox displays the following error:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
The interesting problem is that when inspecting with Firefox, the set headers seem to be misaligned
Host: url
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: uid,x-api-key
Origin: null
Connection: keep-alive
I can edit this in Firefox to the correct way:
Host: url
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:77.0) Gecko/20100101 Firefox/77.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
uid: 1234
x-api-key: 1234
Origin: null
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
And will get successful state 200
What could be the issue of wrong formatting when using js?
I have written a servlet Filter in which I am trying to get the value of custom header=samlRequest, From rest client/postman chrome plugin i am getting the value of samlRequest, but using ajax call i have provide samlRequest key and its value but in java i am getting the only key samlRequest in "Access-Control-Request-Headers", how to get value of samlRequest.
$.ajax({
url: "http://indlin500.corp.test.com:31000/test/Portal/index.html",
type: "GET",
headers: { 'samlRequest': 'eJzVWVlz4roSfs6/oJhHJvECBkMRTsk2+2ow68stY8u2wBuWjQ2//srsyUlmJufOramTSjm41f '},
beforeSend: function(xhr){xhr.setRequestHeader('samlRequest', 'eJzVWVlz4roSfs6/oJhHJvECBkMRTsk2+2ow68stY8u2wBuWjQ2//srsyUlmJufOramTSjm41f ');},
success: function() { alert('Success!' + authHeader); }
});
FirewalledRequest[
weblogic.servlet.internal.ServletRequestImpl#4f839843[ OPTIONS
/testsOSS/Portal/index.html HTTP/1.1 Connection: keep-alive
Access-Control-Request-Method: GET Origin: http://10.19.121.17:7001
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
Access-Control-Request-Headers: authorization, samlrequest,
x-partnerkey Accept: / DNT: 1 Referer:
http://10.19.121.17:7001/authentication-uxf-login-0.0.1-SNAPSHOT/customLoginPage.html Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8
]]
Using chrome rest client plugin I am getting samlRequest in the header with value i have provided.
FirewalledRequest[
weblogic.servlet.internal.ServletRequestImpl#24d746a[ GET
/testOSS/Portal/index.html HTTP/1.1 Connection: keep-alive
Cache-Control: no-cache samlRequest: eJzVWVlz4roSfs6/oJhHJvECBkMRTsk2+2ow68stY8u2wBuWjQ2//srsyUlmJufOramTSjm41f User-Agent: Mozilla/5.0
(Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/55.0.2883.87 Safari/537.36 Postman-Token:
ce7765d0-94b5-a1e1-d6ba-2abada3dfdd6 Accept: / DNT: 1
Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8
]]
When you make a cross-origin request from browser, the browser makes a preflight request before the actual request. It is an OPTIONS request, unlike the intended GET request.
Try adding a CORS filter before the actual filter which will reply OK for any OPTIONS request. A sample code can be found here :
https://amodernstory.com/2014/12/27/using-cors-headers-with-java-example/
by the way, you don't need to set header in request twice. You can remove the beforeSend block from the ajax request.
I am trying to add a completely custom HTTP header - in this case as an example - Header=dog with value=cat. When I run this, in stead of getting a new header, it appends dog to the values in access-control-request-headers? How do I get a new custom header?
Code:
HR = new XMLHttpRequest();
HR.onload = function (e) {
}
HR.open("GET", URI);
HR.setRequestHeader('dog', 'cat');
HR.send();
Request headers as viewed through Chrome developer tools:
access-control-request-headers: origin, dog
access-control-request-method: GET
origin: http://localhost:8888
accept-encoding: gzip,deflate,sdch
accept-language: en-US,en;q=0.8
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
:path: /
accept: */*
:version: HTTP/1.1
cache-control: max-age=0
referer: http://localhost:8888/x.html
:scheme: https
:method: OPTIONS
Response Headersview source
access-control-allow-headers:origin, dog
access-control-allow-methods:OPTIONS
access-control-allow-origin:*
access-control-max-age:300
cache-control:private, no-cache, no-store, must-revalidate
content-length:0