fail to post with javascript fetch api to typicode json server
1
I have a react project where I try to post a JSON object to my Typicode mock json server. https://github.com/typicode/json-server#getting-started
The fetch fails, but I cannot pinpoint the issue. Maybe there is something wrong with the fetch call, I would like to know why and how to fix it.
Here is the react component that calls the fetch method.
import React from "react";
class AddAnimal extends React.Component
constructor(props)
super(props);
this.state = animal: "animal", amount: 0, price: 0, sound: "sound" ;
render()
return (
<form onSubmit=this.handleSubmit>
<input
type="text"
name="animal"
value=this.state.animal
onChange=this.handleOnChange
/>
<input
type="number"
name="amount"
value=this.state.amount
onChange=this.handleOnChange
/>
<input
type="number"
name="price"
value=this.state.price
onChange=this.handleOnChange
/>
<input
type="text"
name="sound"
value=this.state.sound
onChange=this.handleOnChange
/>
<input type="submit" className="btn" value="add Animal" />
</form>
);
handleOnChange = e =>
this.setState([e.target.name]: e.target.value );
console.log(this.state);
;
handleSubmit = e => this.state.price === 0
export default AddAnimal;
This is the fetch method being passed into the AddAnimal component as props.
postAnimal(animal)
fetch("https://localhost:3000/animals",
method: "POST",
headers:
Accept: "application/json",
"Content-Type": "application/json"
,
body: JSON.stringify(animal)
).then(response =>
console.log(response.json());
)
This is how the database looks and how it is structured. This is to show the format the JSON has to be in before getting posted.
"animals": [
"animal": "dogs",
"sound": "woof!",
"amount": 20,
"price": 200
,
"animal": "cats",
"sound": "meow!",
"amount": 15,
"price": 150
,
"animal": "horses",
"sound": "yhgighighrr",
"amount": 4,
"price": 950
]
This is the error the browser prompts me with when i try to submit my form after putting in details.
App.js:36 OPTIONS https://localhost:3000/animals net::ERR_CONNECTION_CLOSED
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
&&
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
javascript reactjs forms fetch
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
add a comment |
1
I have a react project where I try to post a JSON object to my Typicode mock json server. https://github.com/typicode/json-server#getting-started
The fetch fails, but I cannot pinpoint the issue. Maybe there is something wrong with the fetch call, I would like to know why and how to fix it.
Here is the react component that calls the fetch method.
import React from "react";
class AddAnimal extends React.Component
constructor(props)
super(props);
this.state = animal: "animal", amount: 0, price: 0, sound: "sound" ;
render()
return (
<form onSubmit=this.handleSubmit>
<input
type="text"
name="animal"
value=this.state.animal
onChange=this.handleOnChange
/>
<input
type="number"
name="amount"
value=this.state.amount
onChange=this.handleOnChange
/>
<input
type="number"
name="price"
value=this.state.price
onChange=this.handleOnChange
/>
<input
type="text"
name="sound"
value=this.state.sound
onChange=this.handleOnChange
/>
<input type="submit" className="btn" value="add Animal" />
</form>
);
handleOnChange = e =>
this.setState([e.target.name]: e.target.value );
console.log(this.state);
;
handleSubmit = e => this.state.price === 0
export default AddAnimal;
This is the fetch method being passed into the AddAnimal component as props.
postAnimal(animal)
fetch("https://localhost:3000/animals",
method: "POST",
headers:
Accept: "application/json",
"Content-Type": "application/json"
,
body: JSON.stringify(animal)
).then(response =>
console.log(response.json());
)
This is how the database looks and how it is structured. This is to show the format the JSON has to be in before getting posted.
"animals": [
"animal": "dogs",
"sound": "woof!",
"amount": 20,
"price": 200
,
"animal": "cats",
"sound": "meow!",
"amount": 15,
"price": 150
,
"animal": "horses",
"sound": "yhgighighrr",
"amount": 4,
"price": 950
]
This is the error the browser prompts me with when i try to submit my form after putting in details.
App.js:36 OPTIONS https://localhost:3000/animals net::ERR_CONNECTION_CLOSED
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
&&
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
javascript reactjs forms fetch
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
Whenever I see OPTIONS in AJAX error log, my first thought is CORS. Have you tried disabling it?jsonServer.defaults( noCors: true )
– Davion
Nov 12 '18 at 19:31
add a comment |
1
1
1
I have a react project where I try to post a JSON object to my Typicode mock json server. https://github.com/typicode/json-server#getting-started
The fetch fails, but I cannot pinpoint the issue. Maybe there is something wrong with the fetch call, I would like to know why and how to fix it.
Here is the react component that calls the fetch method.
import React from "react";
class AddAnimal extends React.Component
constructor(props)
super(props);
this.state = animal: "animal", amount: 0, price: 0, sound: "sound" ;
render()
return (
<form onSubmit=this.handleSubmit>
<input
type="text"
name="animal"
value=this.state.animal
onChange=this.handleOnChange
/>
<input
type="number"
name="amount"
value=this.state.amount
onChange=this.handleOnChange
/>
<input
type="number"
name="price"
value=this.state.price
onChange=this.handleOnChange
/>
<input
type="text"
name="sound"
value=this.state.sound
onChange=this.handleOnChange
/>
<input type="submit" className="btn" value="add Animal" />
</form>
);
handleOnChange = e =>
this.setState([e.target.name]: e.target.value );
console.log(this.state);
;
handleSubmit = e => this.state.price === 0
export default AddAnimal;
This is the fetch method being passed into the AddAnimal component as props.
postAnimal(animal)
fetch("https://localhost:3000/animals",
method: "POST",
headers:
Accept: "application/json",
"Content-Type": "application/json"
,
body: JSON.stringify(animal)
).then(response =>
console.log(response.json());
)
This is how the database looks and how it is structured. This is to show the format the JSON has to be in before getting posted.
"animals": [
"animal": "dogs",
"sound": "woof!",
"amount": 20,
"price": 200
,
"animal": "cats",
"sound": "meow!",
"amount": 15,
"price": 150
,
"animal": "horses",
"sound": "yhgighighrr",
"amount": 4,
"price": 950
]
This is the error the browser prompts me with when i try to submit my form after putting in details.
App.js:36 OPTIONS https://localhost:3000/animals net::ERR_CONNECTION_CLOSED
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
&&
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
javascript reactjs forms fetch
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
I have a react project where I try to post a JSON object to my Typicode mock json server. https://github.com/typicode/json-server#getting-started
The fetch fails, but I cannot pinpoint the issue. Maybe there is something wrong with the fetch call, I would like to know why and how to fix it.
Here is the react component that calls the fetch method.
import React from "react";
class AddAnimal extends React.Component
constructor(props)
super(props);
this.state = animal: "animal", amount: 0, price: 0, sound: "sound" ;
render()
return (
<form onSubmit=this.handleSubmit>
<input
type="text"
name="animal"
value=this.state.animal
onChange=this.handleOnChange
/>
<input
type="number"
name="amount"
value=this.state.amount
onChange=this.handleOnChange
/>
<input
type="number"
name="price"
value=this.state.price
onChange=this.handleOnChange
/>
<input
type="text"
name="sound"
value=this.state.sound
onChange=this.handleOnChange
/>
<input type="submit" className="btn" value="add Animal" />
</form>
);
handleOnChange = e =>
this.setState([e.target.name]: e.target.value );
console.log(this.state);
;
handleSubmit = e => this.state.price === 0
export default AddAnimal;
This is the fetch method being passed into the AddAnimal component as props.
postAnimal(animal)
fetch("https://localhost:3000/animals",
method: "POST",
headers:
Accept: "application/json",
"Content-Type": "application/json"
,
body: JSON.stringify(animal)
).then(response =>
console.log(response.json());
)
This is how the database looks and how it is structured. This is to show the format the JSON has to be in before getting posted.
"animals": [
"animal": "dogs",
"sound": "woof!",
"amount": 20,
"price": 200
,
"animal": "cats",
"sound": "meow!",
"amount": 15,
"price": 150
,
"animal": "horses",
"sound": "yhgighighrr",
"amount": 4,
"price": 950
]
This is the error the browser prompts me with when i try to submit my form after putting in details.
App.js:36 OPTIONS https://localhost:3000/animals net::ERR_CONNECTION_CLOSED
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
&&
localhost/:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
postAnimal @ App.js:36
AddAnimal._this.handleSubmit @ addAnimal.jsx:51
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:265
executeDispatch @ react-dom.development.js:571
executeDispatchesInOrder @ react-dom.development.js:596
executeDispatchesAndRelease @ react-dom.development.js:695
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:704
forEachAccumulated @ react-dom.development.js:676
runEventsInBatch @ react-dom.development.js:844
runExtractedEventsInBatch @ react-dom.development.js:852
handleTopLevel @ react-dom.development.js:5025
batchedUpdates$1 @ react-dom.development.js:19904
batchedUpdates @ react-dom.development.js:2246
dispatchEvent @ react-dom.development.js:5105
interactiveUpdates$1 @ react-dom.development.js:19966
interactiveUpdates @ react-dom.development.js:2267
dispatchInteractiveEvent @ react-dom.development.js:5081
javascript reactjs forms fetch
javascript reactjs forms fetch
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
asked Nov 12 '18 at 19:11
Jonas GrønbekJonas Grønbek
346111
346111
Whenever I see OPTIONS in AJAX error log, my first thought is CORS. Have you tried disabling it?jsonServer.defaults( noCors: true )
– Davion
Nov 12 '18 at 19:31
add a comment |
Whenever I see OPTIONS in AJAX error log, my first thought is CORS. Have you tried disabling it?jsonServer.defaults( noCors: true )
– Davion
Nov 12 '18 at 19:31
Whenever I see OPTIONS in AJAX error log, my first thought is CORS. Have you tried disabling it?
jsonServer.defaults( noCors: true )– Davion
Nov 12 '18 at 19:31
Whenever I see OPTIONS in AJAX error log, my first thought is CORS. Have you tried disabling it?
jsonServer.defaults( noCors: true )– Davion
Nov 12 '18 at 19:31
add a comment |
1 Answer
1
active
oldest
votes
1
The typicode json-server only accepts an id on the objects from the database, and will not work with an https connection. You need to verify your backend, to make it work.
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
add a comment |
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
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%2f53268616%2ffail-to-post-with-javascript-fetch-api-to-typicode-json-server%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
The typicode json-server only accepts an id on the objects from the database, and will not work with an https connection. You need to verify your backend, to make it work.
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
add a comment |
1
The typicode json-server only accepts an id on the objects from the database, and will not work with an https connection. You need to verify your backend, to make it work.
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
add a comment |
1
1
1
The typicode json-server only accepts an id on the objects from the database, and will not work with an https connection. You need to verify your backend, to make it work.
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
The typicode json-server only accepts an id on the objects from the database, and will not work with an https connection. You need to verify your backend, to make it work.
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
answered Nov 12 '18 at 19:52
baileyhaldwinbaileyhaldwin
678117
678117
add a comment |
add a comment |
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
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%2f53268616%2ffail-to-post-with-javascript-fetch-api-to-typicode-json-server%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
Whenever I see OPTIONS in AJAX error log, my first thought is CORS. Have you tried disabling it?
jsonServer.defaults( noCors: true )– Davion
Nov 12 '18 at 19:31