quick question. I have an AngularJS front end communicating with a Spring REST backend . URL encoding is only necessary for encoding parameters passed in the url (for application/x-www-form-urlencoded). I don't have to worry about the encoding in the body, correct ?
For content type of application/x-www-form-urlencoded the body of a post message needs to be uri encoded:
$http({
url: myUrl,
method: 'POST',
data: $httpParamSerializerJQLike(myData),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
OR alternately:
var config = {
transformRequest: $httpParamSerializer,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
};
$http.post(myUrl, myData, config);
For more information, see:
AngularJS $httpParamSerializer Service API Reference
AngularJS $httpParamSerializerJQLike Service API Reference
Related
I'm working on a CMS site in angularjs + ASP.NET MVC, need to post a raw html string to server side, its throwing
[$sce:itype] Attempted to trust a non-string value in a content requiring a string: Context: html
Already tried content-type to application/x-www-form-urlencoded; charset=UTF-8, JSON.stringify(postdata) and all. But none works.
$http.post({
url: '/xxx/yyyy',
data: $scope.NewMessage, // Raw HTML string - "<div><p>test</p></div>"
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }
}).then(function mySuccess(response) {
console.log(response);
}, function errorCallBack(response) {
console.log(response);
});
Can't send authorization header with rest API. Got 'OPTIONS' error with status 0. All headers and options are allowed on the server. Server is written on PHP.
Here is my request:
axios.post(`${API_URL}users/${23}/profile/main/update`,
{formData},{
headers:{ 'Content-Type':'multipart/form-data',
Authorization:`Bearer ${token}`}
})
It seems like it does not send the header when there is authorization. However, it works, if i delete authorization, and leave only content type
This should do the trick
axios({
method: 'POST',
url:`${API_URL}users/${23}/profile/main/update`,
headers: {
'Content-Type':'multipart/form-data',
'Authorization':`Bearer ${token}`},
data: formData
})
Refer docs for browser
Try to send as below:
var headers = {
'Content-Type': 'multipart/form-data',
'Authorization': `Bearer ${token}`
}
axios.post(`${API_URL}users/${23}/profile/main/update`,
{formData}, headers)
Try using Ajax call below:
import $ from 'jquery';
$.ajax({
url:`${API_URL}users/${23}/profile/main/update`,
processData: false,
contentType: false,
data : formData,
method : "POST",
headers: {
"Authorization": `Bearer ${token}`
}
});
I had this same issue, it is possible that you are not passing the sent auth header from your apache config to your php application.
you might need to set
WSGIPassAuthorization On
inside your virtualhost config.
Check this
I am trying to implement cross-origin post call from angularjs application, then I get the following error.
Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response.
But, when I make a Ajax call it works properly.
How HTTP post call work in angularjs?
Ajax call
$.ajax({
type: 'POST',
url: getAccessTokenUrl,
data: JSON.stringify(clintdata),
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function(resultData) {
console.log(resultData);
},
error: function (request, status, error) {
console.log(status);
}
});
Angularjs HTTP call
$http({
method: 'POST',
url: getAccessTokenUrl,
data: clientdata,
headers: {
'Authorization': undefined,
'Auth-Token': undefined
}
}).then(function(res){
console.log(res);
}, function(err){
console.log(err);
});
I have some default setting. Authorization is for others REST
$http.defaults.headers.common['Content-Type'] = 'application/json;charset=utf-8;' ;
$http.defaults.headers.common['Auth-Token'] = 'X-Requested-With';
$http.defaults.headers.common['Authorization'] = $('#Authorization').val();
Access-Control-* headers are response headers. They come from the server in response to a request. You do not apply them to your request headers.
If your jQuery request works correctly without adding any additional headers, then your AngularJS request should work the same.
The equivalent jQuery request in AngularJS (including removing the Authorization and Auth-Token headers you've set via defaults) is
$http.post(getAccessTokenUrl, clientdata, {
headers: {
Authorization: undefined,
'Auth-Token': undefined
}
}).then(response => {
console.log(response.data)
})
or the long version
$http({
method: 'POST',
url: getAccessTokenUrl,
data: clientdata,
headers: {
Authorization: undefined,
'Auth-Token': undefined
}
}).then(...)
AngularJS by default...
POSTS requests as application/json content-type
Serializes the data property to JSON
Expects a JSON response
Resolves the $http promise with a response object with the response body parsed as JSON into the data property
Remove the following setting
$http.defaults.headers.common['Auth-Token'] = 'X-Requested-With';
$http.defaults.headers.common['Authorization'] = $('#Authorization').val();
Add Authorization header dynamically from Interceptor
request: function(config) {
if (angular.isUndefined(config.skipInterceptor) || !config.skipInterceptor) {
// add Authorization token
}
return config;
}
Http call like this
$http.post('your url', {
skipInterceptor: true
})
I'd don't find on the internet how can I pass datatype and contentType to a shortcut request in AngularJS.
Exemple :
$http.get('url',{
headers:{'header1':'value'}
})
Second question : Can I send the header with this kind of code ?
beforeSend: function (xhr) {
xhr.setRequestHeader('Authorization', 'Bearer ' + Api.getToken());
}
You can add a content type like this, but for this you also need to specify data in the request also
return $http({
method: 'POST',
//withCredentials:true,
headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
data: data,
url: yourUrlHere
});
data can be an empty string but with if you are not adding data it will not set the content-type
For short post method you can do it like this
$http.post('/someUrl', data, {headers:{'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}}).then(successCallback, errorCallback);
Ok, I've tried looking at this How can I post data as form data instead of a request payload?
However, I still can't seem to send my request properly. Here are the details.
$scope.myData = {a: 123, b: 456};
$http({
url: 'myfile',
method: "POST",
data: JSON.stringify($scope.myData),
headers: {'Content-Type': 'application/json'}
})
This keeps being sent as request payload. Any ideas?
When I use 'application/x-www-form-urlencoded' The formdata is used however it is not parsed properly and the whole json is just one string when I look in the Chrome console.
$http provides an option : params.
Use params: instead of data:
$http({
url: 'myfile',
method: "POST",
params: JSON.stringify($scope.myData),
headers: {'Content-Type': 'application/json'}
})