We Keep Coding

Error in with fetch call "net::ERR_CONNECTION_RESET" and "Uncaught (in promise) TypeError: Failed to fetch"

I'm doing a fetch in react and getting these errors and I cannot figure out how to fix it. I am using TypeScript and a C# rest service. It works fine in postman but having these issues in the client.
I have tried disabling all browser extensions and tried other browsers also. This did not work.
I'm expecting to receive a status "201" back from the REST Call.
on button click
<Button className="w-100 btn btn-lg btn-primary" type='submit'onClick={e => {e.preventDefault() handleForm()}}>Register</Button>
javascript:
` async function handleForm() {
console.log(JSON.stringify({ ...registration }))
const endpoint = 'http://localhost:44309/api/Users/Register';
const data = {
email: registration.email,
userName: registration.username,
password: registration.password,
confirmPassword: registration.passwordConfirmation,
userTypeId: 4
};
// Default options are marked with *
const response = await fetch(endpoint,
{
method: 'POST', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return response.json();
}`
here is the C# rest method:
` [HttpPost("[action]")]
public IActionResult Register([FromBody] ApplicationUser applicationUser)
{
var userExists = _dbContext.AppUsers.FirstOrDefault(u => u.Email == applicationUser.Email);
//todo: add validation code
if (userExists != null)
{
return BadRequest("User with the same email address already exists");
}
applicationUser.Password = HashService.HashPassword(applicationUser.Password);
#if (!DEBUG)
applicationUser.ConfirmPassword = "True";
#endif
_dbContext.AppUsers.Add(applicationUser);
_dbContext.SaveChanges();
return StatusCode(StatusCodes.Status201Created);
}`

There was a few issues with this error that I found. 1) was a cors issue, so I added cors to my c# code. 2) My API was using https and the react client was running under http. I needed to configure the create-react-app to run over https instead of http once I got that configured it worked great. I had a difficult time getting the https to work on windows on the client until I found this post. https://medium.com/#praveenmobdev/localhost-as-https-with-reactjs-app-on-windows-a1270d7fbd1f

Node fetch receive a ReadableStream and receive an incomplete response

I am making a request Node fetch receive a ReadableStream and receive an incomplete response. The problem seen as the ReadableStream is not getting complete in the await.
Request:
static async postData(url = "") {
// Default options are marked with *
const response = await fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "same-origin", // no-cors, *cors, same-origin
cache: "default", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, *same-origin, omit
headers: {
"Content-Type": "application/json",
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: "follow", // manual, *follow, error
referrerPolicy: "no-referrer", // no-referrer, *no-referrer-when-downgrade, origin, origin-when-cross-origin, same-origin, strict-origin, strict-origin-when-cross-origin, unsafe-url
//body: JSON.stringify(dados), // body data type must match "Content-Type" header
});
const stream = await response.body?.getReader().read();
let jsonBuffer = Buffer.from(stream?.value!);
let jsonString = jsonBuffer.toString("utf8");
console.log(jsonString);
return JSON.parse(jsonString); // parses JSON response into native JavaScript objects
}
Response:
{"retorno":{"status_processamento":"3","status":"OK","pagina":1,"numero_paginas":1,"contatos":[{"contato":{"id":"715461091","codigo":"","nome":"Fabio Moreno","fantasia":"","tipo_pessoa":"F","cpf_cnpj":"","endereco":"","numero":"","complemento":"","bairro":"Vila Medon","cep":"","cidade":"Americana","uf":"SP","email":"linkiez#gmail.com","fone":"","id_lista_preco":0,"id_vendedor":"0","nome_vendedor":"","s`
Error:
[1] SyntaxError: Unexpected end of JSON input
[1] at JSON.parse ()
[1] at TinyERP.postData (file:///home/linkiez/Desktop/Projetos/JCMserver3/dist/services/tinyERP.js:22:21)
[1] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
[1] at async aprovarOrcamento (file:///home/linkiez/Desktop/Projetos/JCMserver3/dist/controllers/orcamentoController.js:259:40)
[1] nodemon --experimental-specifier-resolution=node -q dist/index.js exited with code SIGINT
[0] tsc --watch exited with code SIGINT

You've said you're using Node.js's fetch, which is meant to be compatible with the web platform's fetch.
Your code isn't reading the entire response. Here's the documentation for the read() method on the default reader returned by getReader() with no arguments:
The read() method of the ReadableStreamDefaultReader interface returns a Promise providing access to the next chunk in the stream's internal queue.
(my emphasis) That's not the entire response, that's just the first chunk of the response.
But there's no need for that code to be anywhere near that complicated, just use the built-in json method to read the entire response and parse it from JSON; see the *** comments below:
static async postData(url = "") {
const response = await fetch(url, {
method: "POST",
mode: "same-origin",
cache: "default",
credentials: "same-origin",
headers: {
"Content-Type": "application/json",
},
redirect: "follow",
referrerPolicy: "no-referrer",
// *** It seems odd that there's no `body` here, given it's a POST
// saying that it's *sending* JSON (the `Content-Type` header above
// says what you're *sending*, not what you're expecting back).
});
// *** This was missing, but it's important; `fetch` only rejects on
// *network* errors, not HTTP errors:
if (!response.ok) {
throw new Error(`HTTP error ${response.status}`);
}
// *** Fully read the response body and parse it from JSON:
return await response.json();
}
Here's a post on my anemic old blog about the need for the ok check I added above.

Sending GET data via fetch() in body instead of specifying it in the URL

I am trying to convert this jQuery call to native Javascript using fetch() as mentioned in MDN (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options).
$.ajax(
{
method: "GET",
url: CB_ABS_URI + "ajax/get-checkin.php",
dataType: "json",
data: { DwellingUnitID:DwellingUnitID },
})
to
// Example POST method implementation:
async function postData(url = '', data = {}) {
// Default options are marked with *
const response = await fetch(url, {
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json'
// 'Content-Type': 'application/x-www-form-urlencoded',
},
redirect: 'follow', // manual, *follow, error
referrerPolicy: 'no-referrer', // no-referrer, *client
body: JSON.stringify(data) // body data type must match "Content-Type" header
});
return await response.json(); // parses JSON response into native JavaScript objects
}
postData(CB_ABS_URI + "ajax/get-checkin.php", { DwellingUnitID: DwellingUnitID })
.then((data) => {
console.log(data); // JSON data parsed by `response.json()` call
});
But I can't seem to send GET data in the body. Is adding the query to ajax/get-checkin.php the only way ?

But I can't seem to send GET data in the body
fetch makes a clear distinction between the query string in the URL and the data in the request body (unlike jQuery which switches between them depending on the request method).
Is adding the query to ajax/get-checkin.php the only way ?
Yes, see the documentation:
If you want to work with URL query parameters:
var url = new URL("https://geo.example.org/api"),
params = {lat:35.696233, long:139.570431}
Object.keys(params).forEach(key => url.searchParams.append(key, params[key]))
fetch(url).then(/* … */)

XMLHttpRequest successful while fetch is blocked

I am trying to access an API from the front-end and i tried both xhr and fetch api requests.
When using fetch, i received the error "Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:5500' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."
However, when using XHR, I do not receive a headers not present warning and it sucessfully fetches the JSON from the api.
I don't quite understand CORS, but my understanding is that there was no header present on the api I was requesting and therefore could not fetch the API. BUT, how was xhr able to fetch the api with the assumed lack of headers on the API? How was the request possible in an XMLHTTPRequest but not a fetch request? How would I use fetch to fetch this API? I have included both my fetch and XHR code below for reference.
Fetch Code:
fetch(requestURL, {
headers: {
"Content-Type": "application/json",
'Authorisation': 'Basic' + apiKeySecured,
"Access-Control-Allow-Origin": "*", // Required for CORS support to work
"Access-Control-Allow-Credentials": false,
"api-key": apiKeySecured,
}
}).then(function (response) {
return response.json();
})
.then(function (myJson) {
console.log(JSON.stringify(myJson));
})
.catch(error => console.error(error));
XHR code:
var xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.addEventListener("readystatechange", function () {
if (this.readyState === this.DONE) {
console.log(this.responseText);
}
});
xhr.open("GET", requestURL);
xhr.setRequestHeader(`api-key`, apiKeySecured);
xhr.send();

You need to set the mode option for fetch.
From the docs:
// Example POST method implementation:
postData(`http://example.com/answer`, {answer: 42})
.then(data => console.log(JSON.stringify(data))) // JSON-string from `response.json()` call
.catch(error => console.error(error));
function postData(url = ``, data = {}) {
// Default options are marked with *
return fetch(url, {
method: "POST", // *GET, POST, PUT, DELETE, etc.
mode: "cors", // no-cors, cors, *same-origin
cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
credentials: "same-origin", // include, same-origin, *omit
headers: {
"Content-Type": "application/json; charset=utf-8",
// "Content-Type": "application/x-www-form-urlencoded",
},
redirect: "follow", // manual, *follow, error
referrer: "no-referrer", // no-referrer, *client
body: JSON.stringify(data), // body data type must match "Content-Type" header
})
.then(response => response.json()); // parses response to JSON
}

What is triggering the pre-flight in your original code?
Every single one of those extra headers you added
"Content-Type": "application/json",
'Authorisation': 'Basic' + apiKeySecured,
"Access-Control-Allow-Origin": "*", // Required for CORS support to work
"Access-Control-Allow-Credentials": false,
Not one of these was added to XHR, so don't add it to fetch
Your fetch should be
fetch(requestURL, {
headers: {
// remove all those random headers you added
"api-key": apiKeySecured
},
mode: 'cors' // add this
}).then(response => response.json())
.then(function (myJson) {
console.log(JSON.stringify(myJson));
})
.catch(error => console.error(error));
Now it is equivalent to your XHR code

How to use fetch with Authorization Header

I'm quite new to using fetch and I dont know if I'm doing this right since it works fairly well with POST. If I use the normal fetch method, and not the function I made, the server responds with the data. But if I use this, the data becomes undefined. Any ideas on how I can fix this?
network_requests.js
export const getData = (url, data) => {
return fetch(url, {
body: JSON.stringify(data), // must match 'Content-Type' header
cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
credentials: 'include', // include, same-origin, *omit
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json',
'Authorization': 'Token '+ localStorage.token
},
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, cors, *same-origin
redirect: 'follow', // manual, *follow, error
referrer: 'no-referrer', // *client, no-referrer
})
.then(response => response.json()); // parses response to JSON
};
sample usage: (doesnt work)
fetchDrivers() {
return getData('/members/drivers').then(data => {
if (!data["error"]) {
//for each entry in drivers data, append data as a dictionary in tableData
//ant tables accept values {"key": value, "column_name" : "value" } format
//I cant just pass the raw array since its a collection of objects
const tableData = [];
//append drivers with their ids as key
data["drivers"].forEach(item => tableData.push({
"key": item.id,
"name": item.name
}));
this.setState({drivers: tableData});
} else {
console.log(data["error"]);
}
});
}