Establishing global credentials in VueJS using Axios

Question

Establishing global credentials in VueJS using Axios

When working in main.js, I included the following code:

axios.defaults.withCredentials = true;

Although this should make it work, I found that the cookies were not being sent to the back end.

I inspected the request header and noticed something strange:

https://i.stack.imgur.com/DOsGh.png

After some testing, I discovered that adding {withCredentials: true} in a specific request made it work perfectly.

However, I wanted a way to avoid having to add this option in each individual request. I decided to set up an interceptor to examine the options being sent with every request.

Have you encountered a similar issue before? Any suggestions on how I can avoid adding this option to each request?

Thank you for your help!

https://i.stack.imgur.com/yBseX.png

vue.js cookies axios

Answer 1

Answer №1

Axios offers the functionality of interceptors as well. Here's how you can set it up:

axios.interceptors.request.use(
  function(config) {
    // Perform an action before the request is sent
    config.withCredentials = true;
    return config;
  },
  function(error) {
    // Handle any errors with the request
    return Promise.reject(error);
  }
);

Answer 2

Axios offers the functionality of interceptors as well. Here's how you can set it up:

axios.interceptors.request.use(
  function(config) {
    // Perform an action before the request is sent
    config.withCredentials = true;
    return config;
  },
  function(error) {
    // Handle any errors with the request
    return Promise.reject(error);
  }
);

Answer 3

Answer №2

After much consideration, I made the decision to stop using axios and switch to vue-resource. By implementing an interceptor with credentials set to true in my main.js file, everything is now running smoothly.

Here is the code snippet from main.js :

Vue.http.interceptors.push(function(request) {
  request.credentials = true
  return function(response) {
  };
});

Answer 4

After much consideration, I made the decision to stop using axios and switch to vue-resource. By implementing an interceptor with credentials set to true in my main.js file, everything is now running smoothly.

Here is the code snippet from main.js :

Vue.http.interceptors.push(function(request) {
  request.credentials = true
  return function(response) {
  };
});

Establishing global credentials in VueJS using Axios

Answer №1

Answer №2

Similar questions

Using Vue Testing Library with Nuxt.js: A Beginner's Guide

Unable to save cookies on mobile browsers, but functioning properly on desktop computers

Is it possible for pdfjs-dist to be used with Typescript?

How to leverage Vue Selectize to fetch JSON data from dropdown options?

Sending multiple arguments to a Vuex action

Issue with setting cookie in Codeception and Selenium

Is it possible to implement sanctum on multiple Vue projects simultaneously?

omitting post request using axios in react js with redux form (does not transmit any data in post request)

Guide to extracting a key from the route module with the help of vuex-router-sync

Dynamic Component Interactions in VueJS using Mouse Events

Vue.js - computed property not rendering in repeated list

Is there something lacking in my project.json while building with nuxtjs?

Utilizing Chart.js with Vue for dynamic time axis plots from JSON data through computed properties

Error encountered with Vuetify stepper simple component wrapper and v-on="$listeners" attribute

Is it possible to extract information from a form's POST request without relying on the traditional "action" attribute within form elements?

Struggling with my `welcome.blade.php` not detecting Vue imported within my Nuxt.js directory

stopping Vue from aggressively recycling DOM elements

Problem encountered when attempting to utilize the spread operator within .vue files in an Elixir Phoenix 1.3 application

Display the full price when no discount is available, but only reveal the discounted price when Vue.js is present

Issue with Framework7 toggle component's reactivity being ineffective