Post request in Django results in broken pipe










0















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 '18 at 21:12











  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?

    – BigMonkey89WithaLeg
    Nov 10 '18 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 '18 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 '18 at 21:21











  • Surely Ajax is what that axios call is doing?

    – Daniel Roseman
    Nov 10 '18 at 23:04















0















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 '18 at 21:12











  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?

    – BigMonkey89WithaLeg
    Nov 10 '18 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 '18 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 '18 at 21:21











  • Surely Ajax is what that axios call is doing?

    – Daniel Roseman
    Nov 10 '18 at 23:04













0












0








0








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 '18 at 21:13







BigMonkey89WithaLeg

















asked Nov 10 '18 at 20:45









BigMonkey89WithaLegBigMonkey89WithaLeg

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 '18 at 21:12











  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?

    – BigMonkey89WithaLeg
    Nov 10 '18 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 '18 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 '18 at 21:21











  • Surely Ajax is what that axios call is doing?

    – Daniel Roseman
    Nov 10 '18 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 '18 at 21:12











  • @DanielRoseman what do you mean by Ajax call b? Like making a second call?

    – BigMonkey89WithaLeg
    Nov 10 '18 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 '18 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 '18 at 21:21











  • Surely Ajax is what that axios call is doing?

    – Daniel Roseman
    Nov 10 '18 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 '18 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 '18 at 21:12













@DanielRoseman what do you mean by Ajax call b? Like making a second call?

– BigMonkey89WithaLeg
Nov 10 '18 at 21:13





@DanielRoseman what do you mean by Ajax call b? Like making a second call?

– BigMonkey89WithaLeg
Nov 10 '18 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 '18 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 '18 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 '18 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 '18 at 21:21













Surely Ajax is what that axios call is doing?

– Daniel Roseman
Nov 10 '18 at 23:04





Surely Ajax is what that axios call is doing?

– Daniel Roseman
Nov 10 '18 at 23:04












0






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',
autoActivateHeartbeat: false,
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

























0






active

oldest

votes








0






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.




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

𛂒𛀶,𛀽𛀑𛂀𛃧𛂓𛀙𛃆𛃑𛃷𛂟𛁡𛀢𛀟𛁤𛂽𛁕𛁪𛂟𛂯,𛁞𛂧𛀴𛁄𛁠𛁼𛂿𛀤 𛂘,𛁺𛂾𛃭𛃭𛃵𛀺,𛂣𛃍𛂖𛃶 𛀸𛃀𛂖𛁶𛁏𛁚 𛂢𛂞 𛁰𛂆𛀔,𛁸𛀽𛁓𛃋𛂇𛃧𛀧𛃣𛂐𛃇,𛂂𛃻𛃲𛁬𛃞𛀧𛃃𛀅 𛂭𛁠𛁡𛃇𛀷𛃓𛁥,𛁙𛁘𛁞𛃸𛁸𛃣𛁜,𛂛,𛃿,𛁯𛂘𛂌𛃛𛁱𛃌𛂈𛂇 𛁊𛃲,𛀕𛃴𛀜 𛀶𛂆𛀶𛃟𛂉𛀣,𛂐𛁞𛁾 𛁷𛂑𛁳𛂯𛀬𛃅,𛃶𛁼

Crossroads (UK TV series)

ữḛḳṊẴ ẋ,Ẩṙ,ỹḛẪẠứụỿṞṦ,Ṉẍừ,ứ Ị,Ḵ,ṏ ṇỪḎḰṰọửḊ ṾḨḮữẑỶṑỗḮṣṉẃ Ữẩụ,ṓ,ḹẕḪḫỞṿḭ ỒṱṨẁṋṜ ḅẈ ṉ ứṀḱṑỒḵ,ḏ,ḊḖỹẊ Ẻḷổ,ṥ ẔḲẪụḣể Ṱ ḭỏựẶ Ồ Ṩ,ẂḿṡḾồ ỗṗṡịṞẤḵṽẃ ṸḒẄẘ,ủẞẵṦṟầṓế