I'm testing some code locally against DocumentDB emulator and REST API calls are not going through. I'm receiving the following error from Chrome:
XMLHttpRequest cannot load https://localhost:8081/dbs.
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access. The response had HTTP status code 401.
My code is in a local file and I've also created a local IIS site with the DocumentDbEmulatorCertificate. Both of these receive the same error.
Fiddler works fine though and the following request returns the list of databases:
User-Agent: Fiddler
x-ms-date: Thu, 16 Feb 2017 00:32:08 GMT
Authorization: type%3dmaster%26ver%3d1.0%26sig%3dbpV9cfJJaOpXeGYwTxM8u3LtODh61EbiKw74d%2bnZCdY%3d
x-ms-version: 2016-07-11
Cache-Control: no-cache
Accept: application/json
Content-Type: application/json
Host: localhost:8081
The code I'm using to make the request is as follows:
<button onclick="db.getList()">Get DBs</button>
var res = document.getElementById("resultText");
var db = {
getList: function () {
let stamp = "Thu, 16 Feb 2017 00:32:08 GMT";
let token =
"type%3dmaster%26ver%3d1.0%26sig%3dbpV9cfJJaOpXeGYwTxM8u3LtODh61EbiKw74d%2bnZCdY%3d";
res.innerText = '> New request...\r> ' + new Date() + "\r";
request.send("GET", "https://localhost:8081/dbs", null, stamp, token, function (data) {
res.innerText += "> " + data + "\r";
});
}
};
var request = {
send: function (method, url, data, stamp, token, callback) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
callback(this.responseText);
} else
if (this.readyState == 4 && this.status != 200) {
res.innerText += "> " + this.status + ': ' + this.responseText + "\r";
}
};
xhttp.open(method, url, true);
xhttp.setRequestHeader("x-ms-date", stamp);
xhttp.setRequestHeader("Authorization", token);
xhttp.setRequestHeader('x-ms-version', '2016-07-11');
xhttp.setRequestHeader("Cache-Control", "no-cache");
xhttp.setRequestHeader('Accept', 'application/json');
//xhttp.setRequestHeader("Content-Type", "application/json");
//xhttp.withCredentials = true;
xhttp.onerror = function (e) {
res.innerText += '> There was an error!\r';
};
xhttp.send(data);
},
};
res.innerText += '> Ready\r';body {
padding: 1em;
font-size: 1em;
font-family: sans-serif;
}
#resultText {
border: 1px solid silver;
padding: 1em;
font-size: 0.7em;
font-family: Courier New, Courier, monospace;
}<!DOCTYPE html>
<html>
<head>
<title>DocumentDB REST API Test</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<h3>Document DB</h3>
Requests
<p>
<button onclick="db.getList()">Get DBs</button>
</p>
<div id="resultText"></div>
</body>Any idea perhaps why I'm experiencing the CORS issue? Surely with the emulator I should be able to make local calls?
