Fetch no-cors issue
HTML
<button onClick="testFetchNoCors(this);">Test no-cors mode</button>
<button onClick="testFetchNormal(this);">Test default mode</button>
<pre id=responseNoCors>no-cors Response</pre>
<pre id=responseNormal>Normal Response</pre>
JavaScript
// fetch was mode: no-cors
function testFetchNoCors() {
fetch("https://httpbin.org/get", {method: "GET", mode: "no-cors", headers: {"content-type": "application/json"}})
.then(function(res) { // response object seems to be null
if (res.ok) {
res.json().then(function(json) {
document.getElementById("responseNoCors").innerHTML = JSON.stringify(json, null,2);
console.log(JSON.stringify(json, null, 2));
});
}
});
}
// fetch with default mode
function testFetchNormal() {
fetch("https://httpbin.org/get", {method: "GET", headers: {"content-type": "application/json"}})
.then(function(res) { // response object is populated with response
if (res.ok) {
res.json().then(function(json) {
document.getElementById("responseNormal").innerHTML = JSON.stringify(json, null,2);
console.log(JSON.stringify(json, null, 2));
});
}
});
}