Vue js making server call using vue-resource - javascript

I'm trying to figure out how to make the below server call using vue-resource. I not quite sure how to set the header and send data using Vue.$http.post
jQuery.ajax({
url: "http://url/",
type: "POST",
headers: {
"Content-Type": "application/json; charset=utf-8",
},
contentType: "application/json",
data: JSON.stringify({
"email": "foo",
"password": "bar
})
})


You should be able to just do this:
Vue.http.post('http://dev-api.languagelink.com/api/auth/login', {
email: 'foo#bar.com',
password: 'foobar',
}).then(res => {
// Handle success response
})
vue-resource will automatically set the Content-Type header and stringifies the payload as JSON.


Try something like this :
this.$http.post('/url', data, {
headers: {
'Content-Type': 'application/json; charset=utf-8'
}
}).then(res => {
//do the stuff
});

Related

Javascript fetch sending HTML and URL strings in an HTTP request

I need to send both a URL and HTML string in a fetch post request. But I am not sure the proper way to do this. The backend is flexible in how it receives the data, I just don't know whether there is a proper way to do this or whether it doesn't matter and is up to the developer. I have the following HTML and URL:
const myUrl = "https://www.example.com/";
const myHtml = document.documentElement.innerHTML;
Should I send as HTML with a custom header:
fetch("/api", {
method: "post",
mode: "no-cors",
headers: {
"Content-Type": "text/html",
myUrl,
},
body: myHtml,
});
Or JSON:
fetch("/api", {
method: "post",
mode: "no-cors",
headers: { "Content-Type": "application/json" },
body: { myUrl, myHtml },
});
Or does it not matter?

Unable to get the correct data format in req.body

I'm trying to parse the body to nodeJS but I get it back in the wrong format.
This is my code:
fetch("http://localhost:5000/email", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: JSON.stringify({ shareUrl: props.shareUrl })
});`
This is how it is parsed when console.log(body.req.shareUrl) in Node
{ '{"shareUrl":"link"}': '' }
this is how I want it back
{ 'shareUrl': 'link' }
EDIT
When I try to send it from Postman it works fine
I get following output:
{ Name: 'jej' }

The Content type:
{ "Content-Type": "application/x-www-form-urlencoded" }
is not ment to send the JSON data in the first place.
If you want to send and receive JSON, change the content type to:
{ "Content-Type": "application/json" }
like:
fetch("http://localhost:5000/email", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: { data: json.stringify({shareUrl: props.shareUrl}) }
});`
On server you will find it under req.body.data

FCM Sending HTTP Post request gives error code 400()

I am using HTTP POST request to give notification to authors on my web-app that their stories are approved by our admin.
My payload looks like this
var payload = {
"notification": {
"title": "Story Approved!",
"body": "Your story is approved"
},
"to" : to
}
This is my request
$.ajax({
type: 'POST',
url: 'https://fcm.googleapis.com/fcm/send',
headers: {
'Content-Type': 'application/json',
'Authorization': 'key='+serverKey
},
data: payload,
success: function(response){
console.log(response);
},
});
Whenever I try to send the request it gives me the following error
POST https://fcm.googleapis.com/fcm/send 400 ()
I am kinda new to this and according to Firebase Error Response Codes
Invalid JSON 400 Check that the JSON message is properly formatted and contains valid fields (for instance, making sure the right data type is passed in).
But I cannot figure out where I am wrong. Any help would be appreciated

just convert your payload to json like this:
data: JSON.stringify(msg)
and your code will be like this:
$.ajax({
type: 'POST',
url: 'https://fcm.googleapis.com/fcm/send',
headers: {
'Content-Type': 'application/json',
'Authorization': 'key='+serverKey
},
data: JSON.stringify(msg),
success: function(response){
console.log(response);
},
});

Ajax POST request issue with Flask Restless

I'm trying to use jQuery and Ajax to send a POST request to my API.
$.ajax({
url: '/api/Orders',
headers: {
contentType: "application/json"
},
type: "POST",
data: JSON.stringify({'description':'test'}),
});
When I'm using postman (chrome extension) the POST request is fine and everything works great.
If I'm trying to use the above code with AJAX the response is:
message:"Request must have "Content-Type: application/json" header"
I find it really weird because I set contentType : "application/json".

Did you have tried to set the property dataType to JSON?
Your code will looks like:
$.ajax({
url: '/api/Orders',
headers: {
contentType: "application/json"
},
type: "POST",
data: JSON.stringify({'description':'test'}),
dataType: "json"
});

After 6 hours i found the correct answer.
$.ajax({
url: 'http://127.0.0.1:5000/api/Orders',
headers: {
accepts: 'application/vnd.api+json'
},
contentType: "application/json",
type : 'post',
data: JSON.stringify({
'description' : 'test'
}),
dataType: "json",
success: function(data) {
console.log(data);
}
});

jQuery Ajax header not being passed

I want to send an AJAX call to a service with a couple of custom headers. While the request goes successfully, the headers are not being sent. The following is my code snippet:
func123: function (params) {
return $.ajax({
url: "http://localhost:8080/",
type: 'GET',
headers: {
"Contract": "1",
"Vector": "abc",
"Authorization": "xyz"
},
dataType: 'json',
contentType: 'application/json'
});
},

Categories