Nuxt JS middleware cant use axios

Question

I want to create a middleware to check if token is valid, but the axios cant read. Anyone can help me how to find solution. this si my code:

middleware/authentication.js

export default  ({ app, redirect }) => {

    let data = {
      'userid': app.$cookies.get('user_id'),
      'token': app.$cookies.get('auth_token'),
    };

    app.$axios.post(`/tokenVerify`,data)
    .then(res => {
      console.log(res)
    })
 }

pages/index.vue

    export default {
        middleware: "authentication",

nuxt.config.js

  modules: [
    '@nuxtjs/axios',
  ],
   axios: {
    proxy: true,
    headers: {
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Accept' : 'application/json, text/plain, */*',
      'Access-Control-Allow-Methods' : 'GET, PUT, POST, DELETE, OPTIONS',
      'Access-Control-Allow-Credentials' : true,
    }
  },

    proxy: {
        '/tokenVerify':{target:process.env.BASE_URL+'index.php/public/tokenVerify', pathRewrite: {'^/tokenVerify': ''}, changeOrigin: true},
        '/vimeoEmbed':{target:'https://vimeo.com/api/oembed.json', pathRewrite: {'^/vimeoEmbed': ''}, changeOrigin: true},
  },

Aren't you supposed to call `redirect` in your auth middleware? All you're doing is logging the result. — , Apr 06 '21 at 07:08
Currently, I did not use the redirect. I Just want to read the axios function,.. and console.log the result. but on that case axios not reading it,.. and also their is no detection in Network/XHR records — AbingPj, Apr 06 '21 at 07:21

score 2 · Answer 1 · answered Apr 06 '21 at 07:37

2

You get the $axios service injected into the middleware context parameter. So you should be able to access it like this:

export default  ({ app, redirect, $axios }) => {
    let data = {
      'userid': app.$cookies.get('user_id'),
      'token': app.$cookies.get('auth_token'),
    };

    $axios.post(`/tokenVerify`,data)
    .then(res => {
      console.log(res)
    })
 }

answered Apr 06 '21 at 07:37

Nikolaj Dam Larsen

5,455
4
32
45

I tried it but still can NOT read the axios code,.. By the way, im using SSR development,. – AbingPj Apr 06 '21 at 07:58
Then I'm not sure what's going on unfortunately. We're also using Nuxt in SSR-mode and the above works for us. – Nikolaj Dam Larsen Apr 06 '21 at 08:11

score 1 · Answer 2 · answered Apr 07 '21 at 08:18

In my case, I'm using nuxt with spa mode.

I have build a nuxt plugin for axios [axios.js in plugin folder] and using that injecting to the application, like this ...

export default function ({ $axios, redirect, app }, inject) {
  // Create a custom axios instance
  const axios = $axios.create({
    headers: {
      common: {
        Accept: "text/plain, */*",
      },
    },
  });

  axios.setBaseURL(process.env.NUXT_ENV_BASE_URL);

  /**
   * Request interceptor
   */
  axios.onRequest((config) => {
    const token = app.store.getters.token || "";

    if (token) {
      if (config.method !== "OPTIONS") {
        config.headers.authorization = `${token}`;
      }
    }

    return config;
  });

  /**
   * Response interceptor
   */
  axios.onResponse((response) => {
    return response.data;
  });

  /**
   * Error interceptor
   */
  axios.onError((error) => {
    if (!error || !error.response || !error.response.status) {
      app.$notify({
        group: "all",
        title: "Network Error",
        text: `Can not connect to the server.`,
        type: "info",
      });

      return;
    }
  });

  // Inject to context as $axios
  inject("axios", axios);
}

I have define the plugin location on nuxt.config.js file. Like this ..

plugins: [
  "~/plugins/axios"
]

now, in my middleware, I can access axios like this ...

export default function (context) {
  context.app.$axios
    .get(API_LINK)
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      console.log(e);
    });
}

It is working for me. If you need further explanation let me know.

score 0 · Answer 3 · answered Jun 26 '23 at 11:37

$axios is available in context in the route middleware. But if you are not able to make a request with $axios then try making the request something like this:

export default function ({$axios, req}) {
  $axios
  .get(`http://${req.headers.host}/${API_LINK}`)
    .then((res) => {
      console.log(res);
    })
    .catch((e) => {
      console.log(e);
    });
}

Adding the host name worked for me!!!

Nuxt JS middleware cant use axios

3 Answers3