Простая авторизация в ответной ошибке: «Ошибка сети при createError ...»

Question

Я хочу протестировать свое приложение и получить данные из API. Когда я захожу в Интернет, я проверяю вкладку network, которая возвращает меня request url в headers, пример: https: // beta.application.com / api / v1 / projects /. Можно ли ссылаться на этот URL в моем приложении?

В console.log у меня ошибка

Не удалось загрузить ресурс: сервер ответил со статусом 401 (Несанкционированное)

Доступ к https: // beta.application.com / api / v1 / projects / at из источника 'chrome-extension: // ccekbkp' имеет был заблокирован политикой CORS: Ответ на предпечатный запрос не пройти проверку контроля доступа: значение Заголовок «Access-Control-Allow-Origin» в ответе не должен быть подстановочный знак '*', когда режим учетных данных запроса 'include'. режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Ошибка сети в createError (webpack-internal: ///./node_modules/axios/lib/core/createError.js: 16) в XMLHttpRequest.handleError (webpack-internal: ///./node_modules/axios/lib/adapters/xhr.js: 87)

Пример:

электронная почта: john.asd@gmail.com

пароль: aZdfgHkL12

В local.storage у меня есть доступ к токену Пример: `{access_token:" 111111111111111111 "}

Могу ли я скопировать этот токен и использовать его в своем приложении в React?

Я пытаюсь это сделать:

  componentDidMount() {
        const token = '111111111111111111'; //token from local.storage 
       /*const hash = Base64.encode(token);
        const Basic = 'Basic ' + hash;*/
        const username= 'john.asd@gmail.com';
        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');
            })
        }

Answer 1

Относительно 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}`
     }
});

и затем используйте его для отправки запросов на сервер

Answer 2

Решение:

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');
        })
    }