We Keep Coding

express and fetch: TypeError: NetworkError when attempting to fetch resource

I am using express, fetch and firefox.
This is the code
async updateTutorial() {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.currentTutorial)
};
await fetch("https://localhost:9000/tutorial/update" , requestOptions);
}
In Firefox I see this error: TypeError: NetworkError when attempting to fetch resource
I do not know what kind of problem it is.

First of all, you must use http instead of https.
To fix the cors error, you have to specify mode:"no-cors" in request options.
async updateTutorial() {
const requestOptions = {
method: "POST",
mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.tutorial)
}
await fetch("http://localhost:9000/tutorial/update" , requestOptions);
}
I hope this helps. Let me know if you face any issues.

I am using now this:
async updateTutorial() {
const requestOptions = {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify(this.tutorial)
}
await fetch("http://localhost:9000/tutorial/update" , requestOptions);
}
In Firefox I get the same error, in Edge and Chrome it works. I have only one AddIn in Firefox installed from HP. This I can't deinstall.

I replaced the form tag with a div. Now there is no error.
I have forgotten to mention that I get this log stamp:
[HMR] Waiting for update signal from WDS...

You are using https://localhost:9000/tutorial/update. For localhost use http://localhost:9000/tutorial/update

ReferenceError: Headers is not defined in Google scripts

I am trying to automate between reply.io and Gsheets, to automatically do API calls, so I can create a 'live' dashboard in Google Sheets through script editor.
I am using the documentation on their website (https://apidocs.reply.io/#b24cfec9-3e95-4409-b520-8dfecd75e682). I only work with Python and I succeed there, but somehow I can't seem to make it work in JavaScript.
The script I use is:
function myFunction() {
var myHeaders = new Headers();
myHeaders.append("x-api-key", "{{Your_apiKey}}");
var raw = "";
var requestOptions = {
method: 'GET',
headers: myHeaders,
body: raw,
redirect: 'follow'
};
fetch("https://api.reply.io/v2/schedules/default", requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));
}
The error I am getting is:
ReferenceError: Headers is not defined
myFunction # Code.gs:2

Google Apps Script do not use the browser built ins, instead they have their own builtins. In this case you would need to use UrlFetchApp.
function myFunction() {
let myHeaders = {
"x-api-key": "{{Your_apiKey}}"
};
let params = {
method: 'get',
headers: myHeaders,
followRedirects : true,
};
let response = UrlFetchApp.fetch("https://api.reply.io/v2/schedules/default", params);
Logger.log(response.getContentText());
}

POSTing a request via AXIOS in Vue always returns a 405 and CORS error

I know this error has multiple solutions and honestly I have tried all of them but it didn't work at all. I am building a Vue App which I am testing in loclahost to send SMS on a button click. Below is the code;
const headers = {
headers: {
"content-type": "application/json",
"Access-control-allow-origin": "*",
authorization: basicAuthHeader(username, upassword),
"account-id": Buffer.from(acc_id, "utf8").toString("base64"),
},
};
function basicAuthHeader(uname, upass) {
let base64String = Buffer.from(
`${uname}:${upass}`,
"utf8"
).toString("base64");
return `Basic ${base64String}`;
}
axios
.post(
`https://www.echomobile.org/api/messaging/send?phone=${phone}&message=${message}`,
headers
)
.then((res) => console.log(res))
.catch((err) => console.error(err));
Another reason why I am stuck is because of the lack of documentation. No matter what I do, I always end up with a CORS and a 405 error. Please help me out.

Getting `tar: Error opening archive: Unrecognized archive format` while downloading a file from server

I have a sample.tar.gz report that's getting generated on my remote system and needs to be downloaded on a button click. I am sending a request via the server and needs to be added to file sample.tar.gz on local system.
On the server side code, I do see binary data in the response
body:"�q'l_�=ks�6���_��^��*q���d��i��bIs9���-H��ṙl����5�_�P4���e�#h��F���}�y���,I�L]/~Bj�,~�USU%E�\r�I�UM�F��R��4C� |��q�\tn[�4���_�^z"�k�u���*�/������G�,��iC믚���%�8Y\t��‚\r���E!YP���U�r/#�d0<[��W=ũ��5t���9�&�X��`cF�5��AJ%[T�I�h�D������L6���[\nC���-5�Fy�9��L��IWy#9hv\+�E%�#N���r�٦��s�5"�P*ğa�����h\̆(��&!Þ!x9a�~�"5���('��>�Iwڂ�g��"�..."
But when the below code runs, I am able to download the file:
export const SystemReport = () => {
downloadReport = (url) => {
const options = {
credentials: 'same-origin',
responseType: 'arraybuffer',
method: 'GET',
headers: {
'Accept': 'application/gzip; charset=utf-8',
'Content-Type': 'application/json; charset=utf-8'
}
}
fetch(url, options)
.then(res => {return res.blob()})
.then(blob => {
let url = window.URL.createObjectURL(blob, {type: 'application/zip'})
let a = document.createElement('a')
a.href = url
a.download = 'test.tar.gz'
a.click()
}).catch(err => console.error(err))
}
const fileUrl = `<System-Path>/api/system-report/download/${<file-name>}`
return (
<div className='download-report'>
<a href='#' onClick={() => downloadReport(fileUrl)} target='_blank' download>
<Download16 />
</a>
</div>
)
}
But when I try to unzip the file, I get the below error
# tar -xvzf ~/Downloads/sample.tar.gz
tar: Error opening archive: Unrecognized archive format
Tried looking for some solutions online since I am still learning about these things, but no luck yet. Any help will be appreciated!
Edit: There is a return, but I somehow forgot to add it here. Have edited the code.

You have made a mistake in the following line:
.then(res => {res.blob()})
The function res => {res.blob()} is equivalent (if we don't take the differences between arrow and regular functions into account) to:
function (res) {
res.blob();
}
It has no return value, so blob in the next .then block will be equal to undefined.
You need to use the res => res.blob() syntax which is equivalent to the following code:
function (res) {
return res.blob();
}

Receiving error Unexpected token < in JSON at position 0; is this a backend or frontend problem?

I currently have a PATCH method:
export const patchEvent = (eventToUpdate) => dispatch => {
fetch(`http://localhost:3000/events/${eventToUpdate.id}/`, {
method: "PATCH",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
workers_hired: eventToUpdate.workers_hired
})
})
.then(res => res.json())
.then(data =>{
dispatch({
type: PATCH_EVENT,
payload: eventToUpdate.workers_hired
})
})
}
Which receives data from a React event:
const addWorker = () => {
const viewedEvent = props.rawEvents.find(event => {
return event.name === props.event.title
})
viewedEvent.workers_hired = 5
props.patchEvent(viewedEvent)
}
Where props.patchEvent is my Redux action that is shown in the first code snippet.
When I fire this action I receive a 404 error "Unexpected token < in JSON at position 0"
Now, I understand that this has to do with the fetch response not being in correct JSON but I cannot for the life of me figure out where the formatting has gone wrong in my code. Any help would be greatly appreciated!

Error 404 means that the url you requested not found. Check if you fetch the correct url.