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?
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
Originally we sent the authentication in the URL as
http://root:root#172.19.50.30/mjpg/video.mjpg?resolution=1024x768&compression=70
and that worked fine. As long as the password wasn't using special characters, this worked. But bad practice and Chrome forced me to do it differently.
The Wireshark header for this request:
GET /mjpg/video.mjpg?resolution=1024x768&compression=70 HTTP/1.1
Host: 172.19.50.30
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://172.19.50.30/local/ipsloitering/index.html?&language=en-US
Connection: keep-alive
Authorization: Digest username="root", realm="AXIS_00408CC561BC", nonce="7kRiObt8BQA=b937e181325fd66b88f1179eb1f5efe649c49e66", uri="/mjpg/video.mjpg?resolution=1024x768&compression=70", algorithm=MD5, response="5f31e9a6fe08992737bacd47bf4131a5", qop=auth, nc=00000001, cnonce="33c8306da3831b3a"
To allow for other characters, and use chrome, I used following JS Code:
fetch(url,
{
method:'GET',
headers: {
'Authorization': 'Basic ' + btoa("root:root")
},
}
)
and the response is
GET /mjpg/video.mjpg?resolution=1920x1080&compression=70 HTTP/1.1
Host: 172.19.50.30
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Referer: http://172.19.50.30/local/ipsloitering/index.html?&language=en-US
authorization: Basic cm9vdDpyb290
origin: http://172.19.50.30
Connection: keep-alive
HTTP/1.1 401 Unauthorized
Date: Tue, 11 Dec 2018 08:54:07 GMT
Server: Apache/2.4.27 (Unix) OpenSSL/1.0.2k
WWW-Authenticate: Digest realm="AXIS_00408CC561BC", nonce="LqVkObt8BQA=f5ede433bcdc7b2d1a7b12c0763156e9d45b8972", algorithm=MD5, qop="auth"
Content-Length: 381
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=iso-8859-1
How do I get the fetch() to use Digest, or what is causing this?
This is kind of strange. I make a rest post call to couchdb 2.0 to update the user database and I get back a 401 status message "error=bad_request" and "reason=Referer header must match host."
However if I change the "post" to "put", then it is happy and returns status of 201 as expected. I could continue use puts, but that isn't the standard.
Suggestions?
POST http://localhost:5984/_users/org.couchdb.user:test1 HTTP/1.1
Host: localhost:5984
Connection: keep-alive
Content-Length: 364
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
content-type: application/json
Accept: */*
DNT: 1
Referer: http://localhost:9000/
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.8
Cookie: io=YBMMIY0pejGjeHV9AACO; AuthSession=foo
{
"_id":"org.couchdb.user:test1",
"_rev":"1-8e2136e07f62238327f87d1ae54a29df",
"type":"user","roles": "user"],
"name":"test1",
"email":"test1#foo.bar",
"fullName":"Test1 esq",
"phone":"555-555-5555",
"id":"org.couchdb.user:test1",
"password_scheme":"pbkdf2",
"iterations":10,
"derived_key":"0e076f6f85f1389fd90ff181d433e1438e8e30a4",
"salt":"37f590de042f07956f6cc11b8a9eb012"
}
Response
HTTP/1.1 400 Bad Request
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:9000
Access-Control-Expose-Headers: content-type, cache-control, accept-ranges, etag, server, x-couch-request-id, x-couch-update-newrev, x-couchdb-body-time
Cache-Control: must-revalidate
Connection: close
Content-Length: 67
Content-Type: application/json
Date: Thu, 29 Dec 2016 23:15:25 GMT
Server: CouchDB/2.0.0 (Erlang OTP/17)
X-Couch-Request-ID: b45ec52b5c
X-CouchDB-Body-Time: 0
{"error":"bad_request","reason":"Referer header must match host."}
**This works**
PUT http://localhost:5984/_users/org.couchdb.user:test1 HTTP/1.1
Host: localhost:5984
Connection: keep-alive
Content-Length: 364
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:9000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
content-type: application/json
Accept: */*
DNT: 1
Referer: http://localhost:9000/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8
Cookie: io=62j8pWngSUNyLwKjAACX; AuthSession=xyyz
{
"_id":"org.couchdb.user:test1",
"_rev":"1-8e2136e07f62238327f87d1ae54a29df",
"type":"user",
"roles":["user"],
"name":"test1",
"email":"test1#foo.bar",
"fullName":"Test1 esq",
"phone":"555-555-5555",
"id":"org.couchdb.user:test1",
"password_scheme":"pbkdf2",
"iterations":10,
"derived_key":"0e076f6f85f1389fd90ff181d433e1438e8e30a4",
"salt":"37f590de042f07956f6cc11b8a9eb012"
}
So, you have troubles with mismatching referrer and expected host because of different port numbers. According to this https://github.com/couchbase/couchdb/blob/2.5.1.1/src/couchdb/couch_httpd.erl#L344
you can place X-Forwarded-Host header with your value - localhost:9000
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