How to setup Axios in SSR?



I need to set up some common headers for the Axios instance. One of those headers happen to carry a string found in a cookie.

The way I understand it reading this part of the docs, I shouldn’t alter the axios I’m importing into app.js, correct?

import Vue from 'vue';
import axios from 'axios';

export default context => {
    axios.defaults.headers.common = {
        foo: 'bar'

    let app = new Vue(/* ... */);

    return { app };

It does work, but now the string found in the cookie from visitor A is set in the request from visitor B cause axios in this file will live throught requests, right?. I can create a new instance of Axios using axios.create() but I can’t assign it to Vue.prototype.$axios cause that’s pretty much the same issue.

Is there a way to assign axios.create() to app and not Vue as a whole so I can avoid cross-request state pollution and access it as this.$axios? How else would you go about it?