I have a useEffect function that calls an api by axios with some bearer authentication in it. Here is my code
const user = useContext(UserContext )
const taskGetFunc = async () => {
try {
const { data } = await axios({
method: 'GET',
url: 'http://demo.shikkhaapp.com/api/homework-list/1',
headers: {'Authorization': user.token}
})
console.log(data)
} catch (error) {
console.log(user.token)
console.log(error)
}
}
useEffect(() => {
taskGetFunc()
}, [])
now this returns me this error
Request failed with status code 401
at node_modules/axios/lib/core/createError.js:15:17 in createError
at node_modules/axios/lib/core/settle.js:16:9 in settle
at node_modules/axios/lib/adapters/xhr.js:57:6 in onloadend
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:614:6 in setReadyState
at node_modules/react-native/Libraries/Network/XMLHttpRequest.js:396:6 in __didCompleteResponse
at node_modules/react-native/Libraries/vendor/emitter/_EventEmitter.js:135:10 in EventEmitter#emit
I know this is an error regarding authentication, but I tried the user.token in the postman and in reqbin. it works perfectly there but not on my react app. I tried doing it in fetch, different ways in axios, but shows me the same error.
Could you please help me with any idea, what might cause the error.
The user.token is a string with Bearer token.
Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJhdWQiOiIxIiwianRpIjoiMGNmNTFiMzQ5ZDliZTVjYjVjODVhOTUzOTk0ZGUzMTY2MDA3Nzk4Njk3MjNkOWRlYTAyOWRjZTgzY2U3N2E3OTJjOTA3Y2RhMmQyMDMzMTQiLCJpYXQiOjE2NDU5MDYxNDguNjkwNTEyODk1NTg0MTA2NDQ1MzEyNSwibmJmIjoxNjQ1OTA2MTQ4LjY5MDUxNTA0MTM1MTMxODM1OTM3NSwiZXhwIjoxNjc3NDQyMTQ4LjY4OTI5NzkxNDUwNTAwNDg4MjgxMjUsInN1YiI6IjQyIiwic2NvcGVzIjpbXX0.LfbwfLwO-PAAxhLcNLMXXelefcK6fmtKvFk55V2tRjWzP-XDqTUdkLO105ybkc1vU1QfX0gxdrCj4OSExItS82ySG5-mD4JmrGk4ckN0Ffs581anL2l3zYuH_ExulG564-Jkbzkqsfbu4nR8ysmlbvBZZmn0B2elIlZWnZRp-5XkDJkUTpvJKrl4CPoc4mldX_5VnoYaoob4ctHkNNVw4FBdnXRXX-OzzpmeW6D9aey1KZcHcwg6OE0aiA5wmp1YwC3Ou2lVE6XbUOl1e0VAFKOCJcCF3i29k89JEnFVuKW-X9tcajFbjRf1UohdpkY-uoIini1256ky-BN3C_98Gqq3w-CORLhbdfQIqET9kzilnKE7pJ97oXHUGzIJSu--IPMfljI9wHfFugXqsBzwa0fD8I1zg9uYW_oNtA264sVdgqVbntp23Q6KG9tecJCBPl7QToVsxaLx9hWjWuos39bt3nyp4Zj4iu4m3X4tGQpTZ-ZOsiY0UD1lGC5CclDTO1LYM2mKX6qGULBlhStQqrzsd9IRC-Qsxxt-MBDN5OQVvKsefdp--c38QUQNHkrwYY6JyWv1umiXcYs0ejwmGUwOIP9657xwm_thHeFIppoeiGZYLO1dJaibSeuA1XLO_Jh7WZ6hg0aTaglIsxBfFf5pguMVNbZ60mQe5NIvclw
Here is the server side header, this is a php code because the server is made with laravel
curl_setopt_array($curl, array(
CURLOPT_URL => 'http://demo.shikkhaapp.com/api/homework-list/1',
CURLOPT_RETURNTRANSFER => true,
CURLOPT_ENCODING => '',
CURLOPT_MAXREDIRS => 10,
CURLOPT_TIMEOUT => 0,
CURLOPT_FOLLOWLOCATION => true,
CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
CURLOPT_CUSTOMREQUEST => 'GET',
CURLOPT_HTTPHEADER => array(
'Authorization: Bearer '.$bearerToken
),
));
Try removing the bearer token either in the laravel or in the user.token because your current token is looking something like this Bearer Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9
your token should contain only on Bearer key
Your Javascript request do not define Authorization as Bearer token, you should defined header as:
headers: {'Authorization': `Bearer ${user.token}`}
If request work with Postman, you can ask to Postman generate client code and compare with your wrote network request in React with axios.
Sorry guys, It was just an CORS error which the backend developer didnt agree at first.