Random Network error on API call (axios post) - vue.js

This is on a vuejs project, I use axios to make API calls.
I have the following API call :
await axios.post(`https://my-api.com/client/upload`,
formData,
{ headers: { 'Content-Type': 'multipart/form-data' }, withCredentials: true })
formData contains a pdf file.
And sometimes we get a Network error. This is the exception :
{
"message" : "Network Error",
"name": "Error",
"stack": "Error: Network Error\n
at t.exports (https://my-site.com/_nuxt/c3e2d4e.js:2:210975)\n
at w.onerror (https://my-site.com/_nuxt/c3e2d4e.js:2:209955)",
"config" : {
"url":"https://my-api.com/client/upload",
"method":"post","data":{},"headers":{"Accept":"application/json, text/plain, */*"},
"transformRequest":[null],"transformResponse":[null],"timeout":0,"withCredentials":true,
"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1
}
}
From what I see I get this error when a client tries to upload a specific file. They try several times with one file and it never works but if they switch device it works (with the same file). May be a false lead but that's what I can see from the logs.
Any idea how I can improve my logs to see the root of the problem ?

Related

Request body missing from POST requests made using Postman scripting

I am trying to run a pre-request script for authenticating all my requests to the Spotify API. It works via the Postman GUI, but when I try to make the request via scripting, it fails because there is no body. Here is my code
const postRequest = {
url: pm.environment.get("spotifyAuthApi"),
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded",
"Accept": "*/*",
"Content-Length": 29,
"Authorization": "Basic " + btoa(pm.environment.get("client_id") + pm.environment.get("client_secret"))
},
body: {
grant_type: "client_credentials",
}
}
I get a
error: "unsupported_grant_type"
error_description: "grant_type parameter is missing"
And when I examine the request via the postman console, there is no request body, even though the request was built exactly like my fetch token request that does the same thing successfully in postman, only via the GUI instead of via a pre-request script. I have searched far and wide about this issue and tried multiple variations of the body object but to no avail. Either the body object doesn't generate my desired field, or it doesn't get created at all.
Mode might be missing in the body object. Try this:
body: {
mode: 'raw',
raw: JSON.stringify({ grant_type: 'client_credentials' })
}
More details might be found in Postman docs for RequestBody.
If you're using urlencoded, the body of the request would be structured like this:
body: {
mode: 'urlencoded',
urlencoded: [
{ key: 'grant_type', value: 'client_credentials'}
]
}

VueJS - Localhost API requests not working on Android Chromium

I am running a vue-project on Chromium 72 on Android v4.4.4 and an API is also running on localhost:8225.
So with the click of a button, I am making a post request using Axios to this localhost API in the project.
var axiosConfig = {
method: "post",
url: "http://localhost:8225/info/update",
data: {},
timeout: 3000,
contentType: "application/json",
headers: {
Authorization: "Basic " + btoa(apiUser + ":" + apiPassword),
},
};
return new Promise(function (resolve, reject) {
axios(axiosConfig)
.then(function (response) {
var result = response;
resolve(result);
console.log("Response", response);
})
.catch(function (error) {
console.log("Error", error);
reject(error);
});
});
But the problem is when I click the button it doesn't hit the API method. It gives Error: timeout of 3000ms exceeded and when I removed the timeout and checked the network tab the request remains in a pending state.
I don't think there is a structural error in the code because the same request works from another application running on the device. When the button is clicked the information gets updated.
Also, I tried all the chromium version till v80 same issue exists. So is there any setting that needs to be changed or enabled on Chromium to handle API requests?
UPDATE:
The API gets hit but when I checked the value of the User(username and password) on HttpListenerContext object, it shows null. I have cross-checked multiple times and I believe the request structure is correct. I am not sure if Chromium is putting some restrictions while sending the requests or the problem is with the backend like CORS issue or maybe something else.

HTTP Response Error with Post to LinkedIn using Share API v2

I am trying to post a Share to LinkedIn using OAuth v2 - I have got authorisation correctly and have the appropriate access keys.
This code is supposed to share a link on LinkedIn, but for some reason it's not working - I'm not sure why. Can anyone help?
this is my request body:
{
"distribution": {
"linkedInDistributionTarget": {}
},
"owner": "urn:li:person:XXXXXX",
"subject": "Test Share Subject",
"text": {
"text": "Hello !"
}
And this my call API shares :
publishPostLink(body : any, token : any){
this.headers = new HttpHeaders(
{
'Content-Type': 'application/json',
'Authorization':'Bearer '+token,
'cache-control': 'no-cache',
'X-Restli-Protocol-Version':'2.0.0', });
return this.http.post("https://api.linkedin.com/v2/shares" , body, {headers: this.headers});}
I get this issue:
I've already installed the Moesif CORS and it didn't worked
I fixed the error using this post..
it should use REST API from the backend and not from frontend
http://localhost is an insecure request origin so its not supportted in many cases.
Try using tunneling software like Ngork https://ngrok.com/

Github API v3, post issues / authentication

I am working on a project making a Kanban board using the Github API v3.
I have no problem with get methods, but when it comes to post methods i get a 404 response, and from what i read in the documentation, this seems to be a authentication error.
I am using personal token for authentication, and have successfully posted through postman, but when i try to post through my own application i get the error.
Link to project if anyone's interested : https://github.com/ericyounger/Kanban-Electron
Below is the code used for posting to github.
Might there be a problem with my code below? Or might it be settings in relation with the token?
postIssue(json){
let packed = this.packPost(json);
return Axios.post(`https://api.github.com/repos/${this.user}/${this.repo}/issues`, packed);
}
packPost(json) {
return {
method: "POST",
headers: {
"Authorization": `token ${this.tokenAuth}`,
"Content-Type": "application/json"
},
body: JSON.stringify({title: json.title})
};
}
This is what i receive:
{message: "Not Found", documentation_url: "https://developer.github.com/v3/issues/#create-an-issue"}
message: "Not Found"
documentation_url: "https://developer.github.com/v3/issues/#create-an-issue"
Console log error message
Without seeing any detailed logs, my first attempt would be to set body to not send the string representation of the body
body: {title: json.title}
This did the trick :)
postIssue(json){
const headers = {
'Content-Type': 'application/json',
'Accept': 'application/vnd.github.v3.raw',
"Authorization": `token ${this.tokenAuth}`,
};
return Axios.post(`https://api.github.com/repos/${this.user}/${this.repo}/issues`, json , {headers: headers});
}

Getting Code 400 using Dialogflow on API request

this is my very first time using Dialogflow, so probably my mistake is very stupid.
here is my problem:
1) I created a sample agent "small-talk'.
2) I enabled the Webhook in the fulfilment section. I setup the URL of the web server making the request and the auth (username, password) of the that web server.
3) I uploaded a simple webpage on that web server with an API request that looks like this one below (this is the sample json referenced in their guide):
axios({
method: 'POST',
url: 'https://api.dialogflow.com/v1/query?v=20150910',
headers: {
'Authorization': 'Bearer ad7829588896432caa8940a291b66f84',
'Content-Type': 'application/json',
},
body: {
"contexts": [
"shop"
],
"lang": "en",
"query": "I need apples",
"sessionId": "12345",
"timezone": "America/New_York"
}
})
.then((response) => {
console.log(response);
})
.catch((error) => {
console.log(error);
})
I keep getting this error:
Cannot parse json. Please validate your json. Code: 400"
The only thing I can thing of, is that I noticed that Dialogflow is now working with the API V2 enabled by default in the agent settings and it seems there is no selection to V1 available anymore. But maybe this has nothing to do with my problem.
Thanks in advance!
Solved it!
In the json request, instead of
body: {...}
I replaced it with
data: {...}
Probably it was obvious, but I am an absolute newbie on these things!
By the way, Google has shutdown Dialogflow V1 starting from 12th July 2021 as per this URL - https://cloud.google.com/dialogflow/docs/release-notes#June_15_2021
In case you are getting http response code 400 (bad request), it means that it is time to migrate :-)