Post request in Django results in broken pipe
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
|
show 1 more comment
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
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
|
show 1 more comment
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
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
django reactjs axios
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
|
show 1 more comment
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
|
show 1 more comment
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
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
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.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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