Can anybody tell How to add header as parameter in ajax call rest web service request in sencha touch
Thanks
Here is how you can add header in the sencha touch AJAX call,
Ext.Ajax.request({
url: 'myUrl',
headers: {
"Content-Type": "application/json"
},
callback: function(options, success, response) {
console.log(response.responseText);
}
});
Related
Here is my code:
axios
.post(
'https://app.adhg.ashdg/m/api/business/get-business',
{
'gid': getgid,
},
{
headers: {
'Cookie': cookie,
'Content-Type': 'application/x-www-form-urlencoded',
},
},
)
.then(function (response) {
// handle success
alert(JSON.stringify(response.data));
})
.catch(function (error) {
// handle error
alert(error.message);
});
I am implementing Axios post request in my React Native application. I want to send formurlencoded parameters along with the header called cookie.
In cookie I am storing AWS token value to send. But I am not getting the response, it says cookie is not sent. The same URL with params working perfectly in Postman. How can I pass cookie in the header?
Try something like this Cookie: name=value.
Mozilla Web Docs
I am trying to send post request to a url on which authorization of type API Key is enabled. I am able to send request through the post man. The API is responding perfectly fine, but when I come to fetch in Vuejs. I am unable to send the POST request using fetch.
Screenshot of POSTMAN is attached.
The tried code which I am using in Vuejs is:-
const requestOptions = {
method: "POST",
withCredentials: true,
headers: {
"Content-Type": "application/json",
"X-API-Key":"3C68F15FF89132BF254E5FB648FCA",
},
body: JSON.stringify({
name: this.name,
phonenumber: this.phoneNumber,
msg: this.message,
}),
};
let response = await fetch(
"https://auto.toxiclabs.net/webhook/d6121492-4b9c-4dc2-908f-991001b20b61",
requestOptions
);
The error I am getting
Anyone who can tell me what actually is wrong in my code ?
Post Functionality in Vue.js is returning a null value.
The API Call is local to my machine on a different port. The GET Functionality work as expected. The POST functionality doesn't work as expected only returns null.
fetch('http://localhost:8080/Exercise/lists/add', {
method: 'POST',
headers: {
"Content-Type" : "application/json",
},
body: JSON.stringify(this.user)
})
.then((response) => {
if(response.ok) {
console.log('Response is Ok.');
}
})
.catch((err) => {console.log(err)});
}
Expected to add a user. Rather returns a null value.
Console.log output here..
PostMan "post" service
PostMan "post" service working..
According to this site, the body of the post request is formated like 'foo=bar&lorem=ipsum'. But in your case the data are a JSON stringified object like "{"x":5,"y":6}". This could make a difference for your backend.
Also you can control the requests between your browser and the backend with the browser's network insepector (for Firefox it's Ctrl+Maj+J, then Network tab). It will tell you what data you send to your server and what is the response.
You should use Axios for API calls in Vue. You can find the Axios reference from the documentation https://v2.vuejs.org/v2/cookbook/using-axios-to-consume-apis.html.
According to the documentation from Google when you use the POST request method you need to pass body and the image you uploaded shows you used firstName param. So either change your API and use body to get the first name or you can do something like this:
fetch('http://localhost:8080/Exercise/lists/add?firstName='+JSON.stringify(this.user), {
method: 'POST',
headers: {
"Content-Type" : "application/json",
},
body: ''
})
.then((response) => {
if(response.ok) {
console.log('Response is Ok.');
}
})
.catch((err) => {console.log(err)});
}
I have no trouble getting a bearer token returned when using Postman. However, when using Aurelia, I receive a status 200 with "OK" as the only response. I see that the Request Method is still "OPTIONS". I see this in the Chrome Console:
Failed to load https://------.auth0.com/oauth/token: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.
But, from what I can see the headers shown in the response and from what I'm seeing everything looks like it's there.
Here's what I receive from Postman:
Response: Status 200 OK
JSON:
{
"access_token": "eyJ0eXAiOiJKV1QiLCJhbGci...{shortened for brevity}",
"expires_in": 86400,
"token_type": "Bearer"
}
Here's code from Aurelia:
private getToken() {
var postData = { "client_id": API_CONFIG.clientId, "client_secret": API_CONFIG.clientSecret, "audience": API_CONFIG.audience, "grant_type": "client_credentials" };
this.http.fetch('https://kimberlite.auth0.com/oauth/token', {
credentials: 'omit',
headers: {
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': 'http://localhost:3000/'
},
mode: 'cors',
method: 'post',
body: JSON.stringify(postData)
}).then(result => result.json())
.then(data => {
localStorage.setItem('api_access_token', data.access_token);
localStorage.setItem('api_expires_at', new Date().getTime() + data.expires_in);
});
}
I've searched and haven't found anything that's helped me get passed this. What am I missing? Any help greatly appreciated
After reading Jesse's comment below, I removed the header for the 'Access-Control-Allow-Origin' and receive the same 200 OK. However, receive error in Google Chrome Origin 'localhost:3000'; is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.".
After reading other questions, I attempted removing all headers and I receive a 401 Unathorized with the following response {{"error":"access_denied","error_description":"Unauthorized"}
private getToken() {
var postData = { "client_id": API_CONFIG.clientId, "client_secret": API_CONFIG.clientSecret, "audience": API_CONFIG.audience, "grant_type": "client_credentials" };
let http = new HttpClient();
http.fetch('https://kimberlite.auth0.com/oauth/token', {
credentials: 'omit',
//headers: {
// 'Content-Type': 'application/json'
//},
mode: 'cors',
method: 'post',
body: JSON.stringify(postData)
}).then(result => result.json())
.then(data => {
localStorage.setItem('api_access_token', data.access_token);
localStorage.setItem('api_expires_at', new Date().getTime() + data.expires_in);
});
}
ok, I just tried in Firefox, using only the 'Content-Type' header and received expected response. Is there something with Chrome (which most users are going to be using) that I need to be aware of?
You shouldn't set the access-control-allow-origin header on the request. In a CORS request, the server endpoint needs to set this header on the response of your OPTIONS request.
The way that Cross-Origin Resource Sharing works, is that the client first makes an OPTIONS call to the server endpoint. The server endpoint should be configured to use CORS, and have a list of origins that are allowed (or simply a * to allow all origins). Then on the response to this OPTIONS request, the server will set the Access-Control-Allow-Origin: https://localhost:3000 to indicate the origin is allowed to make the request. You can see this in your response too:
The client then proceeds to make the GET or POST call to the same endpoint and actually retrieve/store the data.
In your case, if you make the request using the Aurelia fetch client, you don't need to set a header to do this. You can simply do the following:
private getToken() {
var postData = { "client_id": API_CONFIG.clientId, "client_secret": API_CONFIG.clientSecret, "audience": API_CONFIG.audience, "grant_type": "client_credentials" };
this.http.fetch('https://kimberlite.auth0.com/oauth/token', {
credentials: 'omit',
headers: {
'Content-Type': 'application/json'
},
mode: 'cors',
method: 'post',
body: JSON.stringify(postData)
}).then(result => result.json())
.then(data => {
localStorage.setItem('api_access_token', data.access_token);
localStorage.setItem('api_expires_at', new Date().getTime() + data.expires_in);
});
}
I have an API call working fine on:
curl -H "Content-Type: application/json" -H "Authorization: Token d070b44498fd12728d1e1cfbc9aa5f195600d21e" http://localhost:8000/api/subscribers/
It gives me the list of all subscribers. I want to create a Django template to send the request to subscribers. I am not able to send:
-H "Authorization: Token d070b44498fd12728d1e1cfbc9aa5f195600d21e"
from my template.
import requests
headers={'Content-Type':'application/json', 'Authorization':'Token d070b44498fd12728d1e1cfbc9aa5f195600d21e'}
r = requests.get('http://localhost:8000/api/subscribers/', headers=headers)
Why don't you use AJAX to send this? Call the JS function whenever you want to make the request.
$.ajax({
type: "POST",
url: url,
headers: {
'Token': 'your_token_here'
},
data: {
'body': 'value'
}
}).done(function (data) {
console.log("API call successfull : ", data);
});
Ajax is one of the simple ways to do an API call from django template.
See the example below.
$.ajax({
type: 'GET',
url: 'http://localhost:8000/api/subscribers/',
headers: {'Authorization': 'Token d070b44498fd12728d1e1cfbc9aa5f195600d21e'},
success:function(response) {
// on success
},
error: function() {
// on error
}
});
In angularJs we can call API using $http. See the example below,
$http.get("http://localhost:8000/api/subscribers/",
{headers: {'Authorization': 'Token d070b44498fd12728d1e1cfbc9aa5f195600d21e',
'Content-Type':'application/json'}
}).then(function(response) {
// on success
},
function(data) {
// on error
});