Simple authorization in react axios error: `Network Error at createError...`
Solution 1
Solution:
componentDidMount() {
const token = '111111111111111111'; //token from local.storage
const url= "https://beta.application.com/api/v1/projects";
axios.get
axios({
"url": url,
"method": "GET",
"headers": {
'Authorization': `Bearer ${token}`
}
})
.then(response => {
this.setState({
projects: response
});
})
.catch(error => {
console.log('error');
})
}
Solution 2
Regarding Response to preflight request doesn't pass access control check: It does not have HTTP ok status
you might want to check this, seems like a CORS issue.
If this is an extension you should add the proper permissions and content_security_policy to your manifest (also might need to white-list your extension server side).
Regarding the token, you should send it to your server in the header, depending on what the server expects:
headers: {
Authorization: `Bearer ${access_token}`
}
You can even create a new axios instance to avoid adding it all the time:
axiosInstance = axios.create({
headers: {
Authorization: `Bearer ${access_token}`
}
});
and then use it to make your requests to the sever
Related videos on Youtube
Comments
-
Umbro over 1 year
I want to test my app and get data from api. When I'm logged in to the web I check in the
network
tab, which returns merequest url
inheaders
, example:https: // beta.application.com / api / v1 / projects /
. Is it possible for me to refer to this url in my app?In console.log I have error
Failed to load resource: the server responded with a status of 401 (Unauthorized)
Access to https: // beta.application.com / api / v1 / projects / at from origin 'chrome-extension://ccekbkp' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
Network Error at createError (webpack-internal:///./node_modules/axios/lib/core/createError.js:16) at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:87)
Example:
email: [email protected]
password: aZdfgHkL12
In
local.storage
I have access to token Example: `{access_token:" 111111111111111111 "}Can I copy this token and use it in my app in React?
I'm trying to do it:
componentDidMount() { const token = '111111111111111111'; //token from local.storage /*const hash = Base64.encode(token); const Basic = 'Basic ' + hash;*/ const username= '[email protected]'; const password= 'aZdfgHkL12' const url= "https://beta.application.com/api/v1/projects/"; axios.get axios({ "url": url, "withCredentials": true, "method": "GET", "headers": { 'Authorization': `Bearer ${token}` }, "auth": { username: username, password: password } }) .then(response => { this.setState({ projects: response }); }) .catch(error => { console.log('error'); }) }
-
Umbro over 4 yearsI add
"permissions": [ "https://*/", "http://*/" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
; but I have still the same errors -
K41F4r over 4 yearsWhat are you getting?
-
Umbro over 4 years
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
-
K41F4r over 4 yearsShould look at this: stackoverflow.com/a/19744754/4512646 "If you want to allow credentials then your
Access-Control-Allow-Origin
must not use*
." on your server -
Umbro over 4 yearsI had to delete
withCredentials
andauth