I am new to react native and trying to post a request to an api, but I am having different results and I am not able to understand why this is happening what I am missing.
Below is the code and after that a short description is given about the code.
import { Button, TextInput } from "react-native";import axios from "axios";const SignUp = (props: any) => {const { navigation } = props;const [data, setData] = React.useState({ name: "", checkName: false,});const handleNameChange = (val: any) => { if (val.length !== 0) { setData({ name: val, checkName: true, }); } else { setData({ name: val, checkName: false, }); }};const toSend = { name: data.name,};async function handleSubmit() { console.log("Component Did Mount"); let axiosConfig = { headers: {"Content-Type": "application/x-www-form-urlencoded", }, }; axios .post("https://cloud-api.herokuapp.com/api/users/signup", toSend, axiosConfig ) .then((response) => { console.log(response); }) .catch((error) => { console.log(error); });}<TextInput placeholder="Name" onChange={(val: any) => handleNameChange(val)}/>;return <Button title="signUp" onPress={handleSubmit}></Button>;};export default SignUp;
I am not able to demystify this error:
If I a add concrete value to the name state like this { name: "Carla" } and do not enter any value in the text field on front end and press the button, then my request is successfully posted without warning [1] and error[2].
But when I try to use front end to enter value in text box and then sent it on a button click then this warning [1] prompts on browser console and after some time the server respond back with [2].
[1]
index.js:1 Warning: This synthetic event is reused for performance reasons. If you're seeing this, you're accessing the method
isDefaultPrevented
on a released/nullified synthetic event. This is a no-op function. If you must keep the original synthetic event around, use event.persist(). See react-event-pooling for more information.
[2]
Access to XMLHttpRequest at'https://cloud-api.herokuapp.com/api/users/signup' from origin'http://localhost:19006' has been blocked by CORS policy: No'Access-Control-Allow-Origin' header is present on the requested resource. SignUp.tsx:121 Error: Network Error at createError (createError.js:16) at XMLHttpRequest.handleError (xhr.js:83) xhr.js:178 POST https://cloud-api.herokuapp.com/api/users/signup net::ERR_FAILED