I'm currently stuck sending a request to my server and can not get a response. I have tried it on postman and it runs completely fine. However, when I try to put it on react, the back-end always response with a bad request.
Here is my code for the back-end
#GetMapping(value = "/searchPatient")
public ResponseEntity<?> searchPatients(#RequestParam String id_num,
#RequestParam String name) {
List<PatientForSearchDto> patientForSearchDtos = patientService.viewSearchedPatient(id_num, name);
return ResponseEntity.status(HttpStatus.OK).body(
new ResponseObject("ok", "Success", patientForSearchDtos)
);
}
Here is my code for Front end (react)
async function sendRequest () {
const formData = new FormData();
formData.append('id_num', id_num);
formData.append('name', name);
console.log(formData)
console.log(formData.get('name'))
console.log(formData.get('id_num'))
const config = {
method: 'get',
url: 'http://localhost:8080/api/searchPatient',
// headers : {
// 'Content-Type': 'from-data'
// },
data : formData
};
await axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
setPatientList(response.data.data.object)
})
.catch(function (error) {
console.log(error);
});
}
Here is what I get when sending request via postman
enter image description here
Here is when sending request using react
enter image description here
From the Axios docs about Request Config data param:
// data is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', 'DELETE , and
'PATCH'
So, data with GET method is not supported.
Can't you use params instead?
Related
I am trying to upload a file to the server and the server APIs are written using django. The file upload is working perfectly from Postman but when i try to upload from mobile app (React Native) using axios the backend is not able to read it.
Following is the Frontend Snippet:
let accessToken = await AsyncStorage.getItem('accessToken')
let formData = new FormData()
formData.append('doc_type', this.state.selectedDoc.id)
formData.append('document', this.state.selectedFiles) // <- This is the fetched file in array format . [{filname:'abc', size:12344,.....}]
formData.append('description', this.state.description.value)
formData.append('data', JSON.stringify(this.state.selectedDoc.fields))
let url = `${AppConstants.url}api/${AppConstants.apiVersion}/upload_doc`
var config = {
method: 'post',
url: url,
data: formData,
headers: {
'Authorization': `Bearer ${accessToken}`,
}
}
axios(config)
.then((resp) => {
resolve(resp)
})
.catch((err) => {
reject(err)
});
And the backend-end if else statement is as follows:
if(request.FILES.getlist("document")):
files = request.FILES.getlist("document")
....
....
....
else:
return response.JsonResponse({
'success' : False,
'message' : 'Please Upload a file'
}, status = status.HTTP_200_OK)
The above else block is executed even though the UI is sending a valid file.
Request you to please share a solution.
Working with Next.js and Django Rest Framework, I'm authenticating users using JWT. First, when the user successfully logs in to the page, a cookie (which contains the JWT token) is sent to the browser. When the user tries to access a specific page, this cookie is used to validate the petition. I'm having trouble storing the cookie in the browser.
Django | login function
#api_view(['POST'])
#permission_classes((permissions.AllowAny,))
def login(request):
...
response = Response()
response.set_cookie(key='jwt', value=token, httponly=True, max_age=86400)
response.data ={
'message': 'success',
}
return response
And here is how I'm fetching /api/login
Next | Login.js
var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('email', this.state.email);
data.append('password', this.state.password);
data.append('X-CSRFToken', csrftoken);
data.append('mode', 'same-origin');
data.append('Content-Type', 'application/json');
var config = {
method: 'post',
credentials: 'include', #I'm probably having issues with this
url: 'http://localhost:8000/api/login',
data : data
};
axios(config)
.then(res=> {
console.log('success'); #I got logged, but cookie is not stored
})
.catch(
error=>{this.setState({isError:true})}
);
Here is the set-cookie in the browser:
But JWT is missing on storage:
As you can see, in both of them I'm receiving the cookie named JWT. But it's not being stored in the browser.
Thank you in advance for your time and answers!
It's important to note is that mode, credentials aren't supported for configuring Axios.It works in fetch api because those options are part of the Request API (docs for mode are here).
Axios uses a XMLHttpRequest under the hood, not Request.
Try this :
var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('email', this.state.email);
data.append('password', this.state.password);
const headers = {
'Content-Type': 'application/json',
'X-CSRFToken': csrfToken
}
var config = {
method: 'post',
withCredentials: true,
url: 'http://localhost:8000/api/login',
data : data,
{headers: headers}
};
axios(config)
.then(res=> {
console.log('success');
})
.catch(
error=>{this.setState({isError:true})}
);
------------------------------OR----------------------------------
put this at top:
axios.defaults.withCredentials = true
axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
axios.defaults.xsrfCookieName = "csrftoken";
This Must in django:
settings.py:
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
'http://localhost:3000',
'http://localhost:8000'
)
i need send this request with axios.
i need header as multipart request, like below
headers: {
"Content-type": "multipart/form-data",
},
I used spring boot for backend. It expect maltipart not application/json. I tried below code, But it not worked for multipart.
axios.delete(URL, {
headers: {
Authorization: authorizationToken
},
data: {
source: source
}
});
Thanks a lot #Sinan Yaman. I generated it using POSTMAN. Answer is
var axios = require('axios');
var FormData = require('form-data');
var data = new FormData();
data.append('keyName', 'project/photoes/1613388881570-note1.txt');
var config = {
method: 'delete',
url: 'localhost:8080/storage/deleteFile',
headers: {
...data.getHeaders()
},
data : data
};
axios(config)
.then(function (response) {
console.log(JSON.stringify(response.data));
})
.catch(function (error) {
console.log(error);
});
Typically before make frontend we test our backend with postman. For any type of frontend http calls code can automatically generate using postman. This is awesome feature of POSTMAN. Follow below steps.
Press the code button
Select the your backend code environment
I'm building react app, first screen is a login form that is calling a GET rest api resource in other host (8080)(CORS extension on chrome was installed to overcome CORS issue).
After logging in successfully, trying to perform another GET fetch but this time am getting 401!
Tried setting the credentials: 'same-origin' or credentials: 'include' (in both calls, login and second one) but it didn't help!
fetch('http://<some host>:8080/WebServices/api/SessionManager/login?userName='
+ this.state.userName + '&password=' + this.state.password,
{
//credentials: "include",
//mode: "no-cors"
})
.then(
(response) => {
if (response.status < 200 || response.status > 300) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
this.state.showError = true;
this.state.errorMessage = 'Please enter a valid credentials.';
return;
} else {
localStorage.setItem('session', response);
console.log("Response ======>", response);
window.location.href = '/main';
}
}
)
.catch((error) => {
console.error(error);
});
second call:
function getSession(){
return localStorage.getItem('session').then(response => JSON.parse(response))
}
function getProjectDetails(){
let params = getSession();
let headers = new Headers();
fetch('http://<host>:8080/WebServices/api/ProjectManager/getProjectDetails?userSessionId=', params
// {
// //credentials: "include",
// //credentials: "same-origin",
// //crossdomain: true,
// //mode: 'no-cors',
// //headers: headers
// }
)
//.then(res => res.json())
.then((data) => {
this.setState({ projectsDetails: data })
console.log(data);
})
.catch(console.log);
}
class App extends Component {
Is there a way to get the session from browser cookies and set it into the header or parameters of fetch? how can I solve it?
If I understand it right you are asking how to store and retrieve stored values from the cookies.
First you need to store the data you get from the first fetch with, be aware that must convert he json response to string with JSON.stringify.
localStorage.setItem('session', JSON.stringify(response));
An then you can retrieve it with:
localStorage.getItem('session');
LocalStorage has to be stored as json, and decode it after getItem().
So in order to add the session params to the second fetch you can do as follows:
function getSession(){
return JSON.parse(localStorage.getItem('session'))
}
// second fetch,
function secondFetch(){
var params = getSession();
// in var params you have the data stored so now you can do the second fetch
}
I hope I've been of help to you, anything don't hesitate to ask.
i am trying to send a POST request from my angularjs controller to the nodejs server which should then send a full POST request to the external API and this way avoid CORS request as well as make it more secure as i'm sending relatively private data in this POST request.
My angularjs controller function for making the post request to the nodejs server looks like this and it works fine:
var noteData = {
"id":accountNumber,
"notes":[
{
"lId":707414,
"oId":1369944,
"nId":4154191,
"price":23.84
}
]
}
var req = {
method: 'POST',
url: '/note',
data: noteData
}
$http(req).then(function(data){
console.log(data);
});
Now the problem lies in my nodejs server where i just can't seem to figure out how to properly send a POST request with custom headers and pass a JSON data variable..
i've trierd using the nodejs https function since the url i need to access is an https one and not http ,i've also tried the request function with no luck.
I know that the url and data i'm sending is correct since when i plug them into Postman it returns what i expect it to return.
Here are my different attempts on nodejs server:
The data from angularjs request is parsed and retrieved correctly using body-parser
Attempt Using Request:
app.post('/buyNote', function (req, res) {
var options = {
url: 'https://api.lendingclub.com/api/investor/v1/accounts/' + accountNumber + '/trades/buy/',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': apiKey
},
data = JSON.stringify(req.body);
};
request(options, function (error, response, body) {
if (!error) {
// Print out the response body
// console.log(body)
console.log(response.statusCode);
res.sendStatus(200);
} else {
console.log(error);
}
})
This returns status code 500 for some reason, it's sending the data wrongly and hence why the server error...
Using https
var options = {
url: 'https://api.lendingclub.com/api/investor/v1/accounts/' + accountNumber + '/trades/buy/',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': apiKey
}
};
var data = JSON.stringify(req.body);
var req = https.request(options, (res) => {
console.log(`STATUS: ${res.statusCode}`);
console.log(`HEADERS: ${JSON.stringify(res.headers)}`);
res.setEncoding('utf8');
res.on('data', (chunk) => {
console.log(`BODY: ${chunk}`);
});
res.on('end', () => {
console.log('No more data in response.');
});
});
req.on('error', (e) => {
console.log(`problem with request: ${e.message}`);
});
req.write(data);
req.end();
Https attempt return a 301 status for some reasons...
Using the same data, headers and the url in Postman returns a successful response 200 with the data i need...
I don't understand how i can make a simple http request...
Please note: this is my first project working with nodejs and angular, i would know how to implement something like this in php or java easily, but this is boggling me..
So after a lot of messing around and trying different things i have finally found the solution that performs well and does exactly what i need without over complicating things:
Using the module called request-promise is what did the trick. Here's the code that i used for it:
const request = require('request-promise');
const options = {
method: 'POST',
uri: 'https://requestedAPIsource.com/api',
body: req.body,
json: true,
headers: {
'Content-Type': 'application/json',
'Authorization': 'bwejjr33333333333'
}
}
request(options).then(function (response){
res.status(200).json(response);
})
.catch(function (err) {
console.log(err);
})