Post request in Django results in broken pipe









up vote
0
down vote

favorite












I'm trying to make a post request from a react frontend to a django backend to log a user in, and redirect to a new page. The issue I'm having is that even though the request reaches the server and I can get the data when it comes time for django to redirect, the redirect does not happen and their is an output in the console that says "Broken pipe from ('127.0.0.1', 64989)". I've done some research online about this issue, but I still can't figure out how to fix it. However, everything works fine when I use a an html form element with an action and method type. Below I have shared my code.



React Frontend



handleSubmit = () => 
let csrfToken = Cookies.get('csrftoken')
let endpoint = this.state.isLoggingIn ? LOGIN_ENDPOINT : REGISTER_ENDPOINT;
axios(
url: endpoint,
method: "POST",
data:
username: this.state.username,
password: this.state.password,
displayName: this.state.displayName,
,
headers: "X-CSRFToken": csrfToken,
responseType: "json",
).then(function (response)
console.log(response);
).catch(function (error)
console.log(error);
);



Django Backend



def login_view(request):
if request.method == 'POST':
#username = request.POST.get('username') <= I use this and below, to get data sent via a form with an action and method set.
#password = request.POST.get('password')
body_unicode = request.body.decode('utf-8')
data = simplejson.loads(body_unicode)
username = data['username']
password = data['password']
user = authenticate(username=username, password=password)
print user
if user is not None and user.is_active:
login(request, user)
return redirect('chat_app:chat')
else:
return JsonResponse('message': 'Check you username or password')
else:
return render(request, 'frontend/chat_app/home.html')


Following works but is not what I want



With this method I can get the data from the input fields (not shown here)
authenticate the user and redirect them properly. However, I do not want to
use this method because I want to pass back any error messages to the submitFunction() that had been called, or process any other data, in the same page that had made the call.



<form method="POST" action=ENDPOINT>
<input
type="hidden"
name="csrfmiddlewaretoken"
value=csrftoken
/>
....









share|improve this question























  • I don't know much about react, but typically you get this error if you trigger an Ajax call but before it can return the result, the browser moves to a new page. Are you sure the form doesn't cause a standard submit as well as an Ajax event?
    – Daniel Roseman
    Nov 10 at 21:12










  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?
    – BigMonkey89WithaLeg
    Nov 10 at 21:13










  • @DanielRoseman Using the form by itself causes a proper submit, and I am able to redirect which is what I want. I will look to see if i'm not making an ajax call by accident anywhere else. Maybe it happens since I have everything wrapped in a form?
    – BigMonkey89WithaLeg
    Nov 10 at 21:18










  • @DanielRoseman So, I removed the form tags from my component and the Broken pipe is not appearing in the console. However, i'm still back to the issue where the application is not redirecting after logging a user in.
    – BigMonkey89WithaLeg
    Nov 10 at 21:21










  • Surely Ajax is what that axios call is doing?
    – Daniel Roseman
    Nov 10 at 23:04














up vote
0
down vote

favorite












I'm trying to make a post request from a react frontend to a django backend to log a user in, and redirect to a new page. The issue I'm having is that even though the request reaches the server and I can get the data when it comes time for django to redirect, the redirect does not happen and their is an output in the console that says "Broken pipe from ('127.0.0.1', 64989)". I've done some research online about this issue, but I still can't figure out how to fix it. However, everything works fine when I use a an html form element with an action and method type. Below I have shared my code.



React Frontend



handleSubmit = () => 
let csrfToken = Cookies.get('csrftoken')
let endpoint = this.state.isLoggingIn ? LOGIN_ENDPOINT : REGISTER_ENDPOINT;
axios(
url: endpoint,
method: "POST",
data:
username: this.state.username,
password: this.state.password,
displayName: this.state.displayName,
,
headers: "X-CSRFToken": csrfToken,
responseType: "json",
).then(function (response)
console.log(response);
).catch(function (error)
console.log(error);
);



Django Backend



def login_view(request):
if request.method == 'POST':
#username = request.POST.get('username') <= I use this and below, to get data sent via a form with an action and method set.
#password = request.POST.get('password')
body_unicode = request.body.decode('utf-8')
data = simplejson.loads(body_unicode)
username = data['username']
password = data['password']
user = authenticate(username=username, password=password)
print user
if user is not None and user.is_active:
login(request, user)
return redirect('chat_app:chat')
else:
return JsonResponse('message': 'Check you username or password')
else:
return render(request, 'frontend/chat_app/home.html')


Following works but is not what I want



With this method I can get the data from the input fields (not shown here)
authenticate the user and redirect them properly. However, I do not want to
use this method because I want to pass back any error messages to the submitFunction() that had been called, or process any other data, in the same page that had made the call.



<form method="POST" action=ENDPOINT>
<input
type="hidden"
name="csrfmiddlewaretoken"
value=csrftoken
/>
....









share|improve this question























  • I don't know much about react, but typically you get this error if you trigger an Ajax call but before it can return the result, the browser moves to a new page. Are you sure the form doesn't cause a standard submit as well as an Ajax event?
    – Daniel Roseman
    Nov 10 at 21:12










  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?
    – BigMonkey89WithaLeg
    Nov 10 at 21:13










  • @DanielRoseman Using the form by itself causes a proper submit, and I am able to redirect which is what I want. I will look to see if i'm not making an ajax call by accident anywhere else. Maybe it happens since I have everything wrapped in a form?
    – BigMonkey89WithaLeg
    Nov 10 at 21:18










  • @DanielRoseman So, I removed the form tags from my component and the Broken pipe is not appearing in the console. However, i'm still back to the issue where the application is not redirecting after logging a user in.
    – BigMonkey89WithaLeg
    Nov 10 at 21:21










  • Surely Ajax is what that axios call is doing?
    – Daniel Roseman
    Nov 10 at 23:04












up vote
0
down vote

favorite









up vote
0
down vote

favorite











I'm trying to make a post request from a react frontend to a django backend to log a user in, and redirect to a new page. The issue I'm having is that even though the request reaches the server and I can get the data when it comes time for django to redirect, the redirect does not happen and their is an output in the console that says "Broken pipe from ('127.0.0.1', 64989)". I've done some research online about this issue, but I still can't figure out how to fix it. However, everything works fine when I use a an html form element with an action and method type. Below I have shared my code.



React Frontend



handleSubmit = () => 
let csrfToken = Cookies.get('csrftoken')
let endpoint = this.state.isLoggingIn ? LOGIN_ENDPOINT : REGISTER_ENDPOINT;
axios(
url: endpoint,
method: "POST",
data:
username: this.state.username,
password: this.state.password,
displayName: this.state.displayName,
,
headers: "X-CSRFToken": csrfToken,
responseType: "json",
).then(function (response)
console.log(response);
).catch(function (error)
console.log(error);
);



Django Backend



def login_view(request):
if request.method == 'POST':
#username = request.POST.get('username') <= I use this and below, to get data sent via a form with an action and method set.
#password = request.POST.get('password')
body_unicode = request.body.decode('utf-8')
data = simplejson.loads(body_unicode)
username = data['username']
password = data['password']
user = authenticate(username=username, password=password)
print user
if user is not None and user.is_active:
login(request, user)
return redirect('chat_app:chat')
else:
return JsonResponse('message': 'Check you username or password')
else:
return render(request, 'frontend/chat_app/home.html')


Following works but is not what I want



With this method I can get the data from the input fields (not shown here)
authenticate the user and redirect them properly. However, I do not want to
use this method because I want to pass back any error messages to the submitFunction() that had been called, or process any other data, in the same page that had made the call.



<form method="POST" action=ENDPOINT>
<input
type="hidden"
name="csrfmiddlewaretoken"
value=csrftoken
/>
....









share|improve this question















I'm trying to make a post request from a react frontend to a django backend to log a user in, and redirect to a new page. The issue I'm having is that even though the request reaches the server and I can get the data when it comes time for django to redirect, the redirect does not happen and their is an output in the console that says "Broken pipe from ('127.0.0.1', 64989)". I've done some research online about this issue, but I still can't figure out how to fix it. However, everything works fine when I use a an html form element with an action and method type. Below I have shared my code.



React Frontend



handleSubmit = () => 
let csrfToken = Cookies.get('csrftoken')
let endpoint = this.state.isLoggingIn ? LOGIN_ENDPOINT : REGISTER_ENDPOINT;
axios(
url: endpoint,
method: "POST",
data:
username: this.state.username,
password: this.state.password,
displayName: this.state.displayName,
,
headers: "X-CSRFToken": csrfToken,
responseType: "json",
).then(function (response)
console.log(response);
).catch(function (error)
console.log(error);
);



Django Backend



def login_view(request):
if request.method == 'POST':
#username = request.POST.get('username') <= I use this and below, to get data sent via a form with an action and method set.
#password = request.POST.get('password')
body_unicode = request.body.decode('utf-8')
data = simplejson.loads(body_unicode)
username = data['username']
password = data['password']
user = authenticate(username=username, password=password)
print user
if user is not None and user.is_active:
login(request, user)
return redirect('chat_app:chat')
else:
return JsonResponse('message': 'Check you username or password')
else:
return render(request, 'frontend/chat_app/home.html')


Following works but is not what I want



With this method I can get the data from the input fields (not shown here)
authenticate the user and redirect them properly. However, I do not want to
use this method because I want to pass back any error messages to the submitFunction() that had been called, or process any other data, in the same page that had made the call.



<form method="POST" action=ENDPOINT>
<input
type="hidden"
name="csrfmiddlewaretoken"
value=csrftoken
/>
....






django reactjs axios






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Nov 10 at 21:13

























asked Nov 10 at 20:45









BigMonkey89WithaLeg

180212




180212











  • I don't know much about react, but typically you get this error if you trigger an Ajax call but before it can return the result, the browser moves to a new page. Are you sure the form doesn't cause a standard submit as well as an Ajax event?
    – Daniel Roseman
    Nov 10 at 21:12










  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?
    – BigMonkey89WithaLeg
    Nov 10 at 21:13










  • @DanielRoseman Using the form by itself causes a proper submit, and I am able to redirect which is what I want. I will look to see if i'm not making an ajax call by accident anywhere else. Maybe it happens since I have everything wrapped in a form?
    – BigMonkey89WithaLeg
    Nov 10 at 21:18










  • @DanielRoseman So, I removed the form tags from my component and the Broken pipe is not appearing in the console. However, i'm still back to the issue where the application is not redirecting after logging a user in.
    – BigMonkey89WithaLeg
    Nov 10 at 21:21










  • Surely Ajax is what that axios call is doing?
    – Daniel Roseman
    Nov 10 at 23:04
















  • I don't know much about react, but typically you get this error if you trigger an Ajax call but before it can return the result, the browser moves to a new page. Are you sure the form doesn't cause a standard submit as well as an Ajax event?
    – Daniel Roseman
    Nov 10 at 21:12










  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?
    – BigMonkey89WithaLeg
    Nov 10 at 21:13










  • @DanielRoseman Using the form by itself causes a proper submit, and I am able to redirect which is what I want. I will look to see if i'm not making an ajax call by accident anywhere else. Maybe it happens since I have everything wrapped in a form?
    – BigMonkey89WithaLeg
    Nov 10 at 21:18










  • @DanielRoseman So, I removed the form tags from my component and the Broken pipe is not appearing in the console. However, i'm still back to the issue where the application is not redirecting after logging a user in.
    – BigMonkey89WithaLeg
    Nov 10 at 21:21










  • Surely Ajax is what that axios call is doing?
    – Daniel Roseman
    Nov 10 at 23:04















I don't know much about react, but typically you get this error if you trigger an Ajax call but before it can return the result, the browser moves to a new page. Are you sure the form doesn't cause a standard submit as well as an Ajax event?
– Daniel Roseman
Nov 10 at 21:12




I don't know much about react, but typically you get this error if you trigger an Ajax call but before it can return the result, the browser moves to a new page. Are you sure the form doesn't cause a standard submit as well as an Ajax event?
– Daniel Roseman
Nov 10 at 21:12












@DanielRoseman what do you mean by Ajax call b? Like making a second call?
– BigMonkey89WithaLeg
Nov 10 at 21:13




@DanielRoseman what do you mean by Ajax call b? Like making a second call?
– BigMonkey89WithaLeg
Nov 10 at 21:13












@DanielRoseman Using the form by itself causes a proper submit, and I am able to redirect which is what I want. I will look to see if i'm not making an ajax call by accident anywhere else. Maybe it happens since I have everything wrapped in a form?
– BigMonkey89WithaLeg
Nov 10 at 21:18




@DanielRoseman Using the form by itself causes a proper submit, and I am able to redirect which is what I want. I will look to see if i'm not making an ajax call by accident anywhere else. Maybe it happens since I have everything wrapped in a form?
– BigMonkey89WithaLeg
Nov 10 at 21:18












@DanielRoseman So, I removed the form tags from my component and the Broken pipe is not appearing in the console. However, i'm still back to the issue where the application is not redirecting after logging a user in.
– BigMonkey89WithaLeg
Nov 10 at 21:21




@DanielRoseman So, I removed the form tags from my component and the Broken pipe is not appearing in the console. However, i'm still back to the issue where the application is not redirecting after logging a user in.
– BigMonkey89WithaLeg
Nov 10 at 21:21












Surely Ajax is what that axios call is doing?
– Daniel Roseman
Nov 10 at 23:04




Surely Ajax is what that axios call is doing?
– Daniel Roseman
Nov 10 at 23:04

















active

oldest

votes











Your Answer






StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);













draft saved

draft discarded


















StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243238%2fpost-request-in-django-results-in-broken-pipe%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown






























active

oldest

votes













active

oldest

votes









active

oldest

votes






active

oldest

votes















draft saved

draft discarded
















































Thanks for contributing an answer to Stack Overflow!


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • Please be sure to answer the question. Provide details and share your research!

But avoid


  • Asking for help, clarification, or responding to other answers.

  • Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.




draft saved


draft discarded














StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53243238%2fpost-request-in-django-results-in-broken-pipe%23new-answer', 'question_page');

);

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

Use pre created SQLite database for Android project in kotlin

Darth Vader #20

Ondo