NuxtJS $ axios Отправить куки с запросом - PullRequest
Новая
       31

NuxtJS $ axios Отправить куки с запросом

3 голосов
/ 25 июня 2019

Я использую модуль NuxtJS $axios и взаимодействую с внутренним API, который устанавливает cookie для аутентификации для дальнейших аутентифицированных запросов после входа в систему. Я посмотрел на withCredentials: true, но он все еще не взаимодействует должным образом.

Нужно ли устанавливать конкретное значение заголовка или что-то не так с моей конфигурацией axios?

Я просто хочу сохранить и использовать этот файл cookie, полученный при успешном входе в систему, и использовать его в следующих запросах для выполнения аутентифицированных запросов. 

// nuxt.config.js
axios : {
    ...
    credentials: true,
    withCredentials : true,
    requestInterceptor: (config, {store}) => {
        config.headers.common['Content-Type'] = 'application/json';
        config.headers.common['API-Key'] = 'my_api_key';
        return config
    },
    ...
},

и вот где я делаю свой аксиос запрос 


async asyncData({ $axios}) {
    try {
        // this response sends back an authentication cookie
        const login_response = await $axios.$post("my_login_route",{
            password : this.password,
            username : this.email,
        });

        if(login_response.success){
            // how i send my cookie to this route to prove im authenticated?
            const authenticated = await $axios.$get("my_url");
            console.log(authenticated); // always false; doesn't send cookie recieved in login $post request
        }else{
            console.log("Invalid username or password");
        }
    } catch(error) {
        console.log(error);
    }
}

Я сделал тестовую страницу с простым запросом проверки подлинности пользователя. Оказывается, настройки axios в nuxt.config.js здесь НЕ применяются.

Мне нужна конфигурация axios, чтобы она применялась не только к базовому URL, но и к моим маршрутам API. Вот метод проверки, который активируется при нажатии кнопки проверки: 

check_auth : async function(){
    try {
        const response = await this.$axios.$get("https://<my_url>/Utility/IsAuthenticated/");
        console.log("IS AUTH:");
        console.log(response.isAuthenticated);
    }catch(error){
        console.log("something went wrong.");
    }
},

ЗАПРОСЫ HTTP ЗАПРОСА ДЛЯ ЗАПРОСА AXIOS, СДЕЛАННЫЕ ПРАВ ВЫШЕ Как видите, нет файлов cookie или API-Key заголовков, которые я указал в конфигурации axios. 

Host: <my_url>
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.13; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: application/json, text/plain
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: http://localhost:1337/send/account
Origin: http://localhost:1337
DNT: 1
Connection: keep-alive

Что мне нужно изменить в разделе axios nuxt.config.js, чтобы конфигурация axios могла применяться к моему маршруту API? Нужно ли использовать раздел proxy:{}?

Пожалуйста, помогите !!

1 Ответ

0 голосов
/ 28 июня 2019

Так что проблема была НЕ axios в конце концов.

API, к которому я подключаюсь, не позволяет внешним источникам использовать свои куки-файлы, что-то из разных источников. Проблема заключалась в том, что axios не выдавал никаких предупреждений о проблеме перекрестного происхождения, пока я не попытался использовать fetch(), где я увидел предупреждение в своей консоли о том, что на сервере не разрешены файлы cookie перекрестного происхождения или что-то в этом роде, и начал проводить исследование. .

Связанный:

Как включить совместное использование ресурсов между источниками (CORS) в каркасе express.js на node.js

https://github.com/axios/axios/issues/853

Спасибо за помощь в комментариях, но, судя по всему, библиотека axios не имеет почти никакого решения, поскольку это широко распространенная встроенная функция безопасности браузера.

Если у кого-то есть другие предложения или ответы относительно того, как заставить это работать на стороне CLIENT в браузере , пожалуйста, поделитесь со всеми нами.

...