I'm using axios to send requets and my current task is to send request for DELETing user. so i made a button and a function that triggers on click.
sendRequest(e) {
const token = document.querySelector("meta[name=csrf-token]").getAttribute('content');
axios.post('/users/2', {
_method: 'DELETE',
authenticity_token: token,
}).then(response => {
console.log(response)
});
}
According to rails docs:
When parsing POSTed data, Rails will take into account the special
_method parameter and act as if the HTTP method was the one specified inside it ("DELETE" in this example).
But after sending the request, i've got an error in console:
ActionController::RoutingError (No route matches [POST] "/users/2"):
UPD 1:
Just tried simple $.ajax request:
const token = document.querySelector("meta[name=csrf-token]").getAttribute('content');
$.ajax({
method: "POST",
url: "/users/2.json",
data: { _method: "delete", authenticity_token: token }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
})
and it works great. What's the difference than between axios post and ajax post requests so rails woun't parse axios _method field?
Related
edit for future reference
Solved:
on fetch request in script.js, I used Headers instead of headers, hence the "Missing csrf token" instead of missing or incorrect
So i'm building a project in Django for a "password manager" I've built my modules and correctly implemented the Item insertion via Django ModelForm, with csrftoken and all that.
Now i need to make an ajax request for updating the fields of the Item, and wanted to do on the same page
so from Js when opening a LoginItem to edit the content I send a GET request as such
//fetch django for a form, and it sends back pre filled with initial values
fetch(`edit/login=id`)
.then((response) => response.text())
.then((form) => {
const edit_form = document.createElement('form');
edit_form.setAttribute("method", "post");
edit_form.setAttribute("id", "edittest");
edit_form.innerHTML = form;
//append the form
then in script.js, on submit:
fetch(`edit/login=id}`, {
method : "PUT",
Headers:{
//or "X-CSRFToken":event.target.querySelector('[name=csrfmiddlewaretoken]').value
"X-CSRFToken": getCookie("csrftoken"),
"Content-type": "application/json",
},
mode:"same-origin",
body : JSON.stringify(body),
})
.then((response) => response.json())
.then((data) => {
console.log(data)
})
in Views.py
def edit_login(request, id):
if request.method == GET:
login = Entry.objects.get(id=id)
// setting initial values for the form
initial = {
"title": login.title,
"username": login.username,
"password": login.password,
"note": login.note,
"folder": login.folder,
"protected":login.protected,
"favorite": login.favorite,
}
// setting the initial values to the ModelForm
form = LoginForm(initial=edit)
return render(request, 'vault/new_item.html', {"entry_form": form, 'uri_field': uri})
else if request.method == "PUT":
if request.user == login.owner:
data = json.loads(request.body)
print("test") # execution does not reach here
return JsonResponse({"message": "Succesfully edited"}, status = 200 ) # oppure 204 = No content
I get Forbidden (CSRF token missing.): /edit/login=27
In the PUT fetch request I also tried instead of getCookie()
using "X-CSRFToken":event.target.querySelector('[name=csrfmiddlewaretoken]').value to get this form's csrf input value that gave me a different csrftoken than the previous.
Also if I inspect every element I open, i see each of them has a different csrftoken (ok, different requests, so I could fathom the error Incorrect Token, but the missing error i don't understand.
Also, if anyone has a hint on how to do this in an easier way, that'd be great, I have limited knowledge
The simplest way I have solved this problem is by including the {{csrf_token}} value in the data without using #csrf_exempt decorator in Django(The decorator marks a view as being exempt from the protection ensured by the middleware.):
var csrftoken = "{{csrf_token}}";
//Sample ajax request
$.ajax({
url: url,
type: 'POST',
headers:{
"X-CSRFToken": csrftoken
},
data: data,
cache: true,
});
I need to send an XML type data to backend using jquery, ajax as a DELETE request. This returns empty array from backend request body. How can I send id properly?
here is my code,
function deleteProduct(id) {
var xmlDocument = $(
`<productsData>
<Prod_ID>${id}</Prod_ID>
</productsData>`);
$.ajax({
type:"DELETE",
url:"http://localhost:8000/delete",
data:JSON.stringify({
data : xmlDocument
}),
contentType: 'application/json',
dataType: 'text'
});
}
I need to send this data,
<productsData>
<Prod_ID>2</Prod_ID>
</productsData>
this 2 comes from the function parameter.
this is my backend in express
app.delete('/delete',(req,res,next)=>{
console.log(req.body);
res.status(200).json({
message: "success"
})
})
this returns empty object.How can I solve this?
If you want to send XML, don't say you're sending application/json:
function deleteProduct(id) {
return $.ajax({
type: "DELETE",
url: "http://localhost:8000/delete",
data: `<productsData><Prod_ID>${id}</Prod_ID></productsData>`,
contentType: 'application/xml'
});
}
By returning the Ajax request, you can do something like this:
deleteProduct(42).done(function () {
// delete completed, remove e.g. table row...
}).fail(function (jqXhr, status, error) {
// delete failed, keep table row & show alert
alert("Could not delete product: " + error);
});
I am developing a simple REST service in flask.
I have been trying to implement basic authorization.
Whilst, I can pass the username and password from the webpage using manual entry, I can't seem to read them from the header.
Here is my code:
On the server
def test():
if request.authorization and request.authorization.username == '***' and request.authorization.password == '***':
return "Authorized"
else:
return make_response('Authorization failed', 401, {'WWW-Authenticate': 'Basic realm ="Login Required"'})
On the client - using JavaScript
<script>
$(document).ready(function(){
$("#authButton").click(function(){
$.ajax({
xhrFields: {
withCredentials: true
},
headers: {
'Authorization': "Basic " + btoa("***:***")
},
url: "********:5001/",
type: 'GET',
success: function(){
console.log("success");
},
error: function (){
console.log("error");
},
});
});
});
</script
>
I have also tried the Javascript code without the xhr fields section, but for neither do I get anything returned at all.
If I don't send the headers from the client it works and simply asks for manual input of the username and password.
All I'm trying to do is authenticate from the header.
Any pointers would be very gratefully received.
I have a Clojure service:
(ns cowl.server
(:use compojure.core)
(:require [ring.adapter.jetty :as jetty]
[ring.middleware.params :as params]
[ring.middleware.json :as wrap-json]
[ring.util.response :refer [response]]
[clojure.data.json :as json]
[cowl.settings :as settings]
[cowl.db :as db]))
(defn set-as-readed [body]
(println body)
(db/set-as-readed settings/db (:link body))
(str "ok"))
(defroutes main-routes
(POST "/api/news/as-read" { body :body } (set-as-readed body)))
(def app
(-> main-routes
wrap-json/wrap-json-response
(wrap-json/wrap-json-body { :keywords? true })))
If I test it using REST client - it works fine:
If I use it from jQuery I have an error:
$.ajax({
url: 'http://localhost:3000/api/news/as-read',
dataType: 'json',
type: 'POST',
data: JSON.stringify( { link: news.link } ),
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(error);
}
});
Here is logs from server:
{:link http://www.linux.org.ru/news/internet/12919692}
#object[org.eclipse.jetty.server.HttpInputOverHTTP 0x11724c56 HttpInputOverHTTP#11724c56]
First message from REST client, second from my AJAX jQuery request ?
Where did I make an error? The REST client works fine. So I can propose that the server is correct. Why the server can not parse the request from jQuery ?
Update: I can solve problem by:
(json/read-str (slurp body)
on the server side. In this case I can work with my jQuery request, but can not parse REST Client request.
The ring JSON middleware uses the Content-Type header to detect and parse JSON payloads. Most likely the request from jQuery is either omitting this header, or using a default value, so the request body shows up to your handler as a raw text stream.
From the jQuery docs it looks like the dataType tells jQuery what data type you're expecting in the response. It looks like you want to be setting the contentType parameter to "application/json".
You must to say to requester you are sending text or json by changing your header response:
(-> (ring-resp/response (str "Ok"))
(ring-resp/header ("Content-Type" "text/plain")))
;; or application/json if convenient
Try This One
$.ajax({
url: 'http://localhost:3000/api/news/as-read',
dataType: 'json',
type: 'POST',
data: {
link: news.link
},
success: function(data) {
console.log(data);
},
error: function(xhr, status, error) {
console.log(error);
}
});
I wrote a JQuery script to do a user login POST (tried to do what I have done with C# in the additional information section, see below).
After firing a POST with the JQuery code from my html page, I found the following problems:
1 - I debugged into the server side code, and I know that the POST is received by the server (in ValidateClientAuthentication() function, but not in GrantResourceOwnerCredentials() function).
2 - Also, on the server side, I could not find any sign of the username and password, that should have been posted with postdata. Whereas, with the user-side C# code, when I debugged into the server-side C# code, I could see those values in the context variable. I think, this is the whole source of problems.
3 - The JQuery code calls function getFail().
? - I would like to know, what is this JQuery code doing differently than the C# user side code below, and how do I fix it, so they do the same job?
(My guess: is that JSON.stringify and FormURLEncodedContent do something different)
JQuery/Javascript code:
function logIn() {
var postdata = JSON.stringify(
{
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
});
try {
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: postdata,
dataType: "json",
success: getSuccess,
error: getFail
});
} catch (e) {
alert('Error in logIn');
alert(e);
}
function getSuccess(data, textStatus, jqXHR) {
alert('getSuccess in logIn');
alert(data.Response);
};
function getFail(jqXHR, textStatus, errorThrown) {
alert('getFail in logIn');
alert(jqXHR.status); // prints 0
alert(textStatus); // prints error
alert(errorThrown); // prints empty
};
};
Server-side handling POST (C#):
public override async Task ValidateClientAuthentication(
OAuthValidateClientAuthenticationContext context)
{
// after this line, GrantResourceOwnerCredentials should be called, but it is not.
await Task.FromResult(context.Validated());
}
public override async Task GrantResourceOwnerCredentials(
OAuthGrantResourceOwnerCredentialsContext context)
{
var manager = context.OwinContext.GetUserManager<ApplicationUserManager>();
var user = await manager.FindAsync(context.UserName, context.Password);
if (user == null)
{
context.SetError(
"invalid_grant", "The user name or password is incorrect.");
context.Rejected();
return;
}
// Add claims associated with this user to the ClaimsIdentity object:
var identity = new ClaimsIdentity(context.Options.AuthenticationType);
foreach (var userClaim in user.Claims)
{
identity.AddClaim(new Claim(userClaim.ClaimType, userClaim.ClaimValue));
}
context.Validated(identity);
}
Additional information: In a C# client-side test application for my C# Owin web server, I have the following code to do the POST (works correctly):
User-side POST (C#):
//...
HttpResponseMessage response;
var pairs = new List<KeyValuePair<string, string>>
{
new KeyValuePair<string, string>( "grant_type", "password"),
new KeyValuePair<string, string>( "username", userName ),
new KeyValuePair<string, string> ( "password", password )
};
var content = new FormUrlEncodedContent(pairs);
using (var client = new HttpClient())
{
var tokenEndpoint = new Uri(new Uri(_hostUri), "Token"); //_hostUri = http://localhost:8080/Token
response = await client.PostAsync(tokenEndpoint, content);
}
//...
Unfortunately, dataType controls what jQuery expects the returned data to be, not what data is. To set the content type of the request data (data), you use contentType: "json" instead. (More in the documentation.)
var postdata = JSON.stringify(
{
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
});
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: postdata,
dataType: "json",
contentType: "json", // <=== Added
success: getSuccess,
error: getFail
});
If you weren't trying to send JSON, but instead wanted to send the usual URI-encoded form data, you wouldn't use JSON.stringify at all and would just give the object to jQuery's ajax directly; jQuery will then create the URI-encoded form.
try {
jQuery.ajax({
type: "POST",
url: "http://localhost:8080/Token",
cache: false,
data: {
"username": document.getElementById("username").value,
"password": document.getElementById("password").value
},
dataType: "json",
success: getSuccess,
error: getFail
});
// ...
To add to T.J.'s answer just a bit, another reason that sending JSON to the /token endpoint didn't work is simply that it does not support JSON.
Even if you set $.ajax's contentType option to application/json, like you would to send JSON data to MVC or Web API, /token won't accept that payload. It only supports form URLencoded pairs (e.g. username=dave&password=hunter2). $.ajax does that encoding for you automatically if you pass an object to its data option, like your postdata variable if it hadn't been JSON stringified.
Also, you must remember to include the grant_type=password parameter along with your request (as your PostAsync() code does). The /token endpoint will respond with an "invalid grant type" error otherwise, even if the username and password are actually correct.
You should use jquery's $.param to urlencode the data when sending the form data . AngularJs' $http method currently does not do this.
Like
var loginData = {
grant_type: 'password',
username: $scope.loginForm.email,
password: $scope.loginForm.password
};
$auth.submitLogin($.param(loginData))
.then(function (resp) {
alert("Login Success"); // handle success response
})
.catch(function (resp) {
alert("Login Failed"); // handle error response
});
Since angularjs 1.4 this is pretty trivial with the $httpParamSerializerJQLike:
.controller('myCtrl', function($http, $httpParamSerializerJQLike) {
$http({
method: 'POST',
url: baseUrl,
data: $httpParamSerializerJQLike({
"user":{
"email":"wahxxx#gmail.com",
"password":"123456"
}
}),
headers:
'Content-Type': 'application/x-www-form-urlencoded'
})
})