Простая авторизация в реакции на ошибку axios: `Ошибка сети при createError...`
Я хочу протестировать свое приложение и получить данные из API. Когда я захожу в Интернет, я проверяю вкладку network, которая возвращает меня request url в headers, например: https: // beta.application.com / api / v1 / projects /. Могу ли я ссылаться на этот URL-адрес в своем приложении?
В console.info у меня ошибка
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)
Пример:
email: [email protected]
password: aZdfgHkL12
В local.storage у меня есть доступ к токену
Пример: `{access_token:" 1111111111111111111"}
Могу ли я скопировать этот токен и использовать его в своем приложении в React?
Я пытаюсь сделать это:
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.info('error');
})
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Что касается Response to preflight request doesn't pass access control check: It does not have HTTP ok status, вы можете проверить это, это похоже на проблему CORS.
Если это расширение, вы должны добавить правильные разрешения и content_security_policy в свой манифест (также может потребоваться внести в белый список сервер расширений).
Что касается токена, вы должны отправить его на свой сервер в заголовке, в зависимости от того, что ожидает сервер:
headers: {
Authorization: `Bearer ${access_token}`
}
Вы даже можете создать новый экземпляр axios, чтобы не добавлять его постоянно:
axiosInstance = axios.create({
headers: {
Authorization: `Bearer ${access_token}`
}
});
а затем использовать его, чтобы сделать ваши запросы к серверу
Что вы получаете?
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.Следует посмотреть на это: stackoverflow.com/a/19744754/4512646 «Если вы хотите разрешить учетные данные, ваш Access-Control-Allow-Origin не должен использовать *». на вашем сервере
Пришлось удалить withCredentials и auth
Решение:
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.info('error');
})
}
я добавляю
"permissions": [ "https://*/", "http://*/" ], "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"; но у меня все те же ошибки