Ajax request response code 419 even csrf token is available in request - ajax

I have a simple ajax request which is returning 419 even csrf token is available in both the ajax setup header and inform data as well here is my code.
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var formData = new FormData();
formData.append('_token', $("input[name='_token']").val());
formData.append('request_id', $('#request_id').val());
var request = $.ajax({
url: appUrl + "/admin/schedule-detailing-requests",
type: "POST",
data: formData,
processData: false,
contentType: false,
cache: false,
dataType: "json",
// headers: headers
});

Related

Laravel Authentication with Passport,how send token Bearer in ajax header inside laravel project

I can get response from RESTful api when using Postman with Authorization Bearer + token.
But How can I send request with token in ajax (i made it inside my laravel project).
$.ajax({
url: "url",
headers: {
'Authorization': authorizationToken,
},
type: "post",
data: data,
async: false,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (data) {
},
error: function (data, status, error) {
}
});
$.ajaxSetup({
headers: {
"X-CSRF-TOKEN":$('meta[name="csrf-token"]').attractive('content')
"Authorization":"Bearer"+localStorage.getItem('token')
}
});

Ajax post request can't get data with express router

I'm using express.Router() to manage my routes.
then using Ajax post request send some data to it. but I can't get the data.
ajax code :
$.ajax({
url: '/custom',
type: 'POST',
contentType: 'application/json; charset-utf-8',
dataType: 'json',
processData: false,
data: JSON.stringify({ "key": "values" }),
success: function(data) {
console.log(data.toString());
}
})
express code:
var express = require('express');
var router = express.Router();
router.post('/custom', function(req, res) {
console.log(req.body);
console.log(req.params);
console.log(req.query);
res.write(JSON.stringify());
res.end();
});
but all the logs are empty.
The issue is because the content-type header in your ajax is malformed.
Instead of
contentType: 'application/json; charset-utf-8' it should be contentType: 'application/json; charset=utf-8'.
Assuming you are using the bodyParser.json() middleware, this would cause the body to not be parsed, which would print an empty body. When you sent the requests with Postman the proper headers were sent, which is why it worked there but not from the ajax request.

400 using Axios to make a post request to Django Rest Framework

I'm working with learning some javascript to make a post to a little rest API I created with django rest. I have a post that works when I was working with jQuery but now I am reimplementing using Vue.js and am hitting a snag. When I do the below post request I get a 400 error and am not sure what I am missing. I would imagine something with my header is incorrect? Any advice would be welcome.
axios({
method: 'post',
url: '/api/matches/',
data: JSON.stringify(data),
headers: {
"X-CSRFToken": csrfToken,
"Content-Type": "application/json"
}
})
jQuery post for reference:
$.ajax({
type: "POST",
url: "/api/matches/",
data: JSON.stringify(final_data),
success: function() {},
error: function(err) {console.log(err)},
contentType: "application/json; charset=utf-8",
dataType: "json",
crossDomain:false,
beforeSend: function(xhr, settings) {
xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
});

Can't pass data from attributes using ajax laravel 5.1

var formData = new FormData();
formData.append('name', name.val());
formData.append('email', email.val());
formData.append('contact_number', contact_number.val());
formData.append('barangay', barangay.val());
formData.append('landmark', landmark.val());
formData.append('password', password.val());
formData.append('confirm_password', confirm_password.val());
//Problem start here it came from attributes but I can alert the data and it was fine.
formData.append('image_pin', img_top);
formData.append('img_left', img_left);
formData.append('img_z_index', img_z_index);
formData.append('input_value', input_value);
formData.append('input_top', input_top);
formData.append('input_left', input_left);
$.ajax({
url: 'register',
headers: {'X-CSRF-TOKEN': token.val() },
method: 'post',
processData: false,
contentType: false,
cache: false,
dataType: 'json',
data: formData,
success: function(data){
console.log(data);
},
error: function(){
}
});
//The input works fine but the attributes data is undefined
$request->input('img_top');
$request->input('img_left');

jQuery Ajax caching

I make a few Ajax calls to get files via jQuery like so:
$.ajax({
url: "/resx.mvc",
data: {
virtualPath: options.virtualPath,
keys: options.keys,
global: options.global
},
cache: true,
success: function (values) {
$.extend(assignTo, values);
},
dataType: "JSON",
traditional: true
});
When I look at the request in Fiddler, I see that these two headers are being sent, and making my ASP.NET send back an expires header on its response with -1:
Pragma: no-cache
Cache-Control: no-cache
How do I tell jQuery not to issue no-cache?
beforeSend takes an ajax object (XmlHttpRequest object) which you can use to manipulate the request header. Below is an example of setting a header in your request using the ajax object returned in the callback:
$.ajax({
type:"POST",
beforeSend: function (request)
{
request.setRequestHeader("Authority", authorizationToken);
},
url: "entities",
data: "json=" + escape(JSON.stringify(createRequestObject)),
processData: false,
success: function(msg) {
$("#results").append("The result =" + StringifyPretty(msg));
}
});

Resources