Develop Reference

Getting 400 Bad Request on axios post call

I'm using a url shortner API to test connecting to a API and I keep getting a 400 BadRequest. I've read through a dozen posts here and tried all suggestions and still nothing will work. I don't know what I'm doing wrong.
Function
var axios = require('axios');
module.exports = function (callback, data) {
let url = 'https://cleanuri.com/api/v1/shorten';
let axiosConfig = {
"headers": {
'Content-Type': 'application/json;charset=UTF-8'
}
};
let longUrl = { "url" : data };
axios(url, {
method: "post",
params: {
"url" : data
},
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
}
})
.then(function (response) {
callback(null, response.data);
}).catch(function (err) {
console.log("error: " + err.response);
callback(err, null);
});
I've also tried this and got same error
axios.post(url, JSON.stringify(longUrl), axiosConfig)
.then(function (response) {
callback(null, response.data);
}).catch(function (err) {
console.log("error: " + err.response);
callback(err, null);
});

To send data as body use data field on request options
const payload = { ... }
axios({ ..., data: payload })
params field is used to send query string within url
I have read your api docs https://cleanuri.com/docs.
That requiring your payload send as body, so use data field
Here the snippet:
let payload = { "url" : data };
axios(url, {
method: "post",
data: payload,
headers: {
"Accept": "application/json",
"Content-Type": "application/json"
}
})
Edit:
400 Bad Request is indicating your request is invalid (by server)

Generating Access token with axios in react-native

POSTMAN sample
the same process i want to do it in react-native and i have tried like that
var baseHeaders = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Bearer ' + btoa(client_id + ':' + client_secret)
};
var params = {
client_id: client_id,
client_secret: client_secret,
grant_type: "client_credentials",
}
axios({
method: 'POST',
url: "http://transrv02-ap01.transsyssolutions.com:8080/apex/apxprd/oauth/token",
headers: baseHeaders,
body:params
})
.then((responseJson) => { console.log("clientid---"+responseJson)})
.catch((error) => {
console.error(error);
});
but it have showing 401 error.
Anyone can help me!
thanks in advance....

You can try this...
axios.post('http://transrv02-ap01.transsyssolutions.com:8080/apex/apxprd/oauth/token',
params,
{
headers: baseHeaders
})
.then((responseJson) => { console.log("clientid---"+responseJson)})
.catch((error) => {
console.error(error);
});

Finally I Found My own way not in axios
var baseHeaders = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': "Basic " + btoa(client_id + ":" + client_secret)
};
console.log(JSON.stringify(baseHeaders) + "baseHeaders")
var params = "grant_type=client_credentials";
console.log(JSON.stringify(params) + "params")
return fetch('http://apex/apxprd/oauth/token',{
method: "POST",
body: params,
headers: baseHeaders
}).then((response) => response.json()).then((responsetokenJson) => {
console.log(JSON.stringify(responsetokenJson) + "responseJsonclientid")
var token = responsetokenJson.access_token
console.log("this.props.tokens--" + token)
this.setState({
accessToken: token
})
})

Vue.js fetch returns empty responseText

I am trying to make my first vue.js app work. At least I am able to do 'fetch' with result 200 (that is a some kind of success) with the following code:
fetch("validate-recaptcha.php", {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
//make sure to serialize your JSON body
body: JSON.stringify({
name: "myName",
password: "myPassword"
})
})
.then((response) => {
//do something awesome that makes the world a better place
if (response.status == 200) {
alert(response.statusText + " " + response.responseText);
}
else {
alert("Error: " + response.statusText);
}
});
but it is not clear why response.responseText in undefined. If I open the URL I query in a browser I get this:
{"secret":"yoursecretkey","remoteip":"97.33.22.522"}
so at least the content is not empty, but the JavaScript shows the message "OK undefined".
Links:
Full source code.
Live demo (press Send Form button).

Response resulting from fetch() does not have a responseText property, hence the undefined. You can extract the JSON data from the response using method json() on the the response. responseText exists with XMLHttpRequest, but not with fetch():
fetch("validate-recaptcha.php", {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({ name: "myName", password: "myPassword" })
})
.then((response) => {
if (response.status == 200) {
alert(response.statusText);
}
else {
alert("Error: " + response.statusText);
}
/* returns a promise that can be utilized using `then() */
return response.json();
// could also use then() here
// return response.json().then(data => console.log(data));
})
.then(data => console.log(data));
Hopefully that helps!

React Native "fetch" returning server response without the information

I am using react native to create an application to act as a website that currently exists (with a user interface that works on a phone). i am using the "fetch" method to send a Http POST request to get information from a web server. The web server sends a response but it doesn't include the response message:
I apologies that is an image but the debugger is not working for me.
The code used to send the request:
HttpRequest = (RequestURL, callback) => {
var AdminLoginBindingModel = {
usr: this.state.username,
pwd: this.state.password,
}
fetch(RequestURL,
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(AdminLoginBindingModel)
})
.then((res) => {
callback(res);
})
.catch((error) => {
this.setState({Response: "Error: " + error});
})
}
The callback function in the parameters is just a function to change the state variable to display the information on the screen
ValidateResponse(response){
this.setState({Response: "Result: " + JSON.stringify(response),
displayMessage: "Success"});
console.log(JSON.stringify(response));
}
The Request being sent is "https://mibase-test.mibase.com.au/members/api/startSession.php?usr=&pwd="
The server responds with a json object regardless of a correct login or not
Edit:
Changing the response to
.then((res) => {
callback(res.json());
})
Result:

To get object from fetch response, you have to call res.json like following:
fetch(RequestURL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(AdminLoginBindingModel)
})
.then(res => res.json()) // HERE
.then(obj => callback(obj))
But it occurs an error because response body itself is invalid json format. It contains some HTML tags:
{"member": {"username":"","password":"","key":"***","status":"No"}}<br><br>Username: <br>Key: ***
Please check the inplementation of server.
EDIT: full code here
const fetch = require("node-fetch")
HttpRequest = (RequestURL, callback) => {
const AdminLoginBindingModel = { usr: "foo", pwd: "bar" }
fetch(RequestURL, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(AdminLoginBindingModel)
})
.then(res => res.json())
.then(obj => callback(obj))
.catch(error => console.log(error))
}
const ValidateResponse = response => console.log(JSON.stringify(response))
URL = 'https://mibase-test.mibase.com.au/members/api/startSession.php?usr=&pwd='
HttpRequest(URL, ValidateResponse)

response doesn't contain received data directly. It provides interface methods to retrieve it. For example use response.json() to parse response text as JSON. It will return promise that resolves to the parsed object. You won't need to call JSON.parse on it:
fetch(RequestURL,
{
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(AdminLoginBindingModel)
})
.then((res) => {
return res.json();
}).then((obj) => {
console.log(obj);
});
Check https://developer.mozilla.org/en-US/docs/Web/API/Response and https://facebook.github.io/react-native/docs/network.html for more information.

axios preflight http status code 500

I can't seem to make the yelp API work for me. I get past the first ajax but the I get error on the second.
XMLHttpRequest cannot load https://api.yelp.com/v3/businesses/search. Response for preflight has invalid HTTP status code 500
I am running this on localhost:3000 and I'm using Allow-Control-Allow-Origin: * extension on Chrome.
This is my code on client side:
axios({
method: 'post',
url: 'https://api.yelp.com/oauth2/token',
data: 'grant_type=client_credentials'
+ '&client_id='+api[0]
+ '&client_secret='+api[1]
}).then(res => {
USER_TOKEN = res.data.access_token;
const AuthStr = 'Bearer '.concat(USER_TOKEN);
axios.get(api[2], { headers: { Authorization: AuthStr } })
.then(res => {
// If request is good...
console.log(response.data);
})
.catch((error) => {
console.log('error ' + error);
});
})
.catch((error) => {
console.log('error ' + error);
});