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
Related
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?
I have a web page served by FastAPI that on a button click is initiating a POST request using pure Javascript to a route in my API which then should redirect to an external page.
The Javascript:
function submit(url) {
let xhr = new XMLHttpRequest();
xhr.open("POST", url, false);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(); }
In my app FastAPI app, I added the following:
app.add_middleware(
CORSMiddleware,
allow_credentials=True,
allow_origins=['*', 'http://127.0.0.1:8080', 'http://127.0.0.1:8080/OpryW?', 'http://127.0.0.1:8080/OpryW'],
allow_methods=["*"],
allow_headers=["*"],
)
When clicking the button, however, I am still getting a CORS error.
Here are some details about the request:
POST: http://127.0.0.1:8080/OpryW
Request headers:
POST /OpryW HTTP/1.1
Host: 127.0.0.1:8080
Connection: keep-alive
Content-Length: 19
Pragma: no-cache
Cache-Control: no-cache
sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A Brand";v="99"
sec-ch-ua-mobile: ?0
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36
sec-ch-ua-platform: "macOS"
Content-Type: application/json
Accept: */*
Origin: http://127.0.0.1:8080
Sec-Fetch-Site: same-origin
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Referer: http://127.0.0.1:8080/OpryW?
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Response headers:
HTTP/1.1 307 Temporary Redirect
date: Mon, 01 Nov 2021 20:00:10 GMT
server: uvicorn
location: http://www.google.com
access-control-allow-origin: *
access-control-allow-credentials: true
Transfer-Encoding: chunked
Why am I still getting a CORS error?
Thanks
I'm working with a public API that is poorly configured, i.e. the server doesn't set the Cache-Control header when it should.
Can I use HTTP request headers or alter response headers, so that a response is cached at the browser level for some period of time?
In the context of this API the response will be fresh until a specific data time calculated previously.
I looked quite a bit, but cannot seem to find anything related to setting request headers.
Note, I'm working in javascript and using fetch() to make requests.
Here is the state of the current headers:
Request Headers
:authority: fantasy.premierleague.com
:method: GET
:path: /api/entry/1157414/event/3/picks/
:scheme: https
accept: */*
accept-encoding: gzip, deflate, br
accept-language: en-GB,en-US;q=0.9,en;q=0.8
sec-ch-ua: "Google Chrome";v="87", " Not;A Brand";v="99", "Chromium";v="87"
sec-ch-ua-mobile: ?0
sec-fetch-dest: empty
sec-fetch-mode: cors
sec-fetch-site: same-origin
user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_1_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Response Headers
accept-ranges: bytes
content-length: 571
content-type: text/html
date: Fri, 25 Dec 2020 16:57:32 GMT
server: nginx/1.18.0
via: 1.1 google, 1.1 varnish, 1.1 varnish
x-cache: MISS, MISS
x-cache-hits: 0, 0
x-served-by: cache-lhr7366-LHR, cache-fra19130-FRA
x-timer: S1608915452.118518,VS0,VE22
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 an iframe with src set to (let say) domainA.com and parent url is domainB.com, from this iframe i make an ajax call to domainA.com/ajax.asp, this works in chrome and firefox, but not with safari and IE. bellow are complete header request for chrome and safari.
REQUEST HEADER (Chrome)
POST /Ajax.asp HTTP/1.1
Host: domainA.com
Connection: keep-alive
Content-Length: 29
Accept: */*
Origin: http://test.takeoutmenuz.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://domainA.com/menu.asp?userid=1025
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,id;q=0.6
Cookie: userid=1025; ASPSESSIONIDAQCQASBD=IDGHMLJDBHOKJFBIKMCNDHDA; ZZZZZ=here
REQUEST HEADER (Safari)
POST /Ajax.asp HTTP/1.1
Host: domainA.com
Connection: keep-alive
Content-Length: 29
Accept: */*
Origin: http://test.takeoutmenuz.com
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.152 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://domainA.com/menu.asp?userid=1025
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8,id;q=0.6
as you see, there is no Cookie header in safari, based on explanation from this page the problem is that Cookie stuff (if i not mistaken). how to make it work without Cookie, should i do something on response header in Ajax.asp or do something in ajax script (i already add withCredential field to it)?