I want to learn how fetch works. Backend is very simple
<?php
print_r(json_encode($_POST['test']));
And I created this fetch
fetch('http://localhost/test.php', {
method: 'POST',
body: JSON.stringify({
test: 'test'
})
})
.then(res => res.json())
.then(data => console.log(data))
All the time this code return null in console.log. Where I make a mistake?
You have two problems.
Strings and Fetch
If you POST a string using fetch it will default to sending it with a Content-Type: text/plain header.
Plain text isn't JSON. Specify the correct Content-Type.
fetch('http://localhost/test.php', {
method: 'POST',
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
test: 'test'
})
})
PHP won't process JSON formatted requests automatically
You need to read the raw body and parse it yourself. This is a FAQ. Here is the solution.
Related
I'm trying to send API response from my Javascript file like this:
try {
await fetch('https://example.com/api', {
method: 'post',
mode: 'no-cors',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
username: 'john',
})
}).then((response) => response.json())
.then((data) => console.log(data));
} catch (e) {
console.error(e);
}
Now I'm trying to get the body of the request.
My Backend Server built on PHP.
I have already seen this Stackoverflow Question.
As I saw there, I need to do this:
To access the entity body of a POST or PUT request (or any other HTTP method): $entityBody = file_get_contents('php://input');
This is my Index.php file:
<?php
$entityBody = file_get_contents('php://input');
echo json_encode($entityBody);
And it returns nothing.
I'm new to PHP so maybe its a stupid mistake.
My goal is to print john in the console.
Guys I'm making a fetch request for laravel without using jquery and I would like to get the return of this request, however when I give a console.log() in the response the console informs undefined.
This is my request:
fetch(action, {
headers: {
"Content-Type": "application/json",
"Accept": "application/json",
"X-Requested-With": "XMLHttpRequest",
"X-CSRF-Token": token
},
method: "post",
credentials: "same-origin",
body: JSON.stringify({
email: email,
password: password
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.log(err))
This is my controller that returns the empty field information:
public function login(Request $request)
{
if (in_array('', $request->only('email', 'password'))) {
$json['message'] = "Empty";
return response()->json($json);
}
var_dump($request->all());
}
The request was successful and the browser informs the response message:
Object response message
However console.log(data) returns undefined, how can I return the object that contains the message?
Taking advantage of the question, is this the best way to make this request?
Thank you guys
I am using a the fetch api to send a post request to my NodeJS/Express/MongoDB based API but somehow, only some of the fields are posted to the MongoDB collection. The rest are omitted. When I use console.log to print the whole js object in the console, I get a partial object with a ... at the end, which when hovered over, shows "Value below was evaluated just now". Looks like the request is sending the object in chunks. I want to send the whole object. How can I send the whole object?
FRONTEND:
document.getElementById('contact-submit').onclick = async (e) => {
e.preventDefault();
console.log(postData('http://localhost:4001/people',{
"name":document.getElementById('name').value.toString(),
"age": document.getElementById('age').value ,
"sex":document.getElementById('sex').value,
"address":document.getElementById('address').value,
"class": document.getElementById('class').value,
"degree": Number(document.getElementById('degree').value),
"grade":document.getElementById('grade').value,
"notes":Date(document.getElementById('notes').value),
"resume":Number(document.getElementById('resume').value),
"skills":criteria,
"rounds":rounds,
}));
}
async function postData(url = '', data ={}){
console.log(data);
const response = await fetch(url, {
method: 'POST',
mode: 'cors',
cache: 'no-cache',
credentials: 'same-origin',
headers:{
'Content-Type': 'application/json',
},
redirect: 'follow',
referrerPolicy: 'no-referrer',
body: JSON.stringify(data)
});
return response.json();
}
The object comes from a form, and only a part of it gets posted in the api.
PS. The API on its own works fine and POSTs complete objects when operated on through postman.
I'm encountering a bit of a roadblock in my dev work. I'm trying to upload a photo that I'm sending using FormData in fetch. I'm guessing my problem is in my content header or my back-end handling. Eitherway, I can't seem to find a way around it. I hope you guys can help me
general.js - this is my handler for a request
export const postDataWithImage = (url, data) => {
return fetch(url, {
body: data, // must match 'Content-Type' header
credentials: 'same-origin', //pass cookies, for authentication
method: 'POST',
headers: {
'Accept': 'application/json, application/xml, text/plain, text/html, *.*',
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
},
})
.then(response => response.json()); // parses response to JSON
};
user-creation.js - my actual usage of the function above (sending multiple data)
heres an image of the data I'm sending
![1] https://imgur.com/leBlC7L
const data = {...this.state, ...form};
const formData = new FormData();
Object.entries(data).forEach(([key, value]) => formData.append(key, value));
postDataWithImage('/users', data)
.then(data => {
if (data.error) {
console.log("theres an error");
this.setState({
error: data["error"]
});
console.log(this.state.error);
} else {
console.log(data["data"]);
}
})
.catch(error => message.warning(error.message));
views.py - my backend handler using Django REST not: this returns me an error either byte has no attribute 'get'... or an empty ModelDict for request.FILES
#staticmethod
def post(request):
print(request.body.get('image'))
print(request.FILES)
if "username" not in request.data or "password" not in request.data:
return Response(data={
"error": "Missing username or password"
}, status=400, content_type="application/json")
return Response(data=data, status=200, content_type="application/json")
Please help me I'm really stuck. Thank you!
I faced similar problem using Vue.js and Django.
Finally I noticed that the problem was that: boundary was not set to the header.
The solution is to remove headers from your request like this:
fetch(url, {
body: data, // assume this is some binary data
method: 'POST',
})
Then, your browser will automatically add proper headers for your request. And you will see boundary field which is added by your browser in your request headers.
Try to remove the "Content-Type" from the headers of fetch
I am passing a blob image file to a server using the header,
application/octet-stream.
I need to also pass some string values to the server with it. If I change the header to
application/json
I can access the string, but the blob becomes undefined.
Example
const data = {
blob,
firstname: 'Nichoals',
};
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.blob())
.then(blob => {
...
})
.catch(error => console.log(error));
},
'image/png',
1,
);
Things I have tried
I have tried to pass the data using FormData() and was able to get the data to the server but the file was corrupt. I do think I could figure out how to get it to work this way but I would like to learn a better way to do it if possible.
Things I do not want to do
I do not want to convert the blob to a string because I fear that will be way to expensive.
Question
In what way can I POST an object with a blob and some string values inside of it to a server without using the way mentioned above?
Essentially this,
const data = {
blob,
firstname: 'Will',
};
You could send the json as a header:
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',
'Custom-Json': JSON.stringify(data)
},
body: blob,
}).then(response => response.blob())
.then(blob => {
// handle response
})
.catch(error => console.log(error));