Setting defaults with SSR

kirillbunin
0
kirillbunin
commented 10 months ago

Version

v5.5.3

Reproduction link

*

Steps to reproduce

I have following in my nuxt.config.js:

  modules: [
    '@nuxtjs/axios',
  ],
  axios: {
    debug: process.env.NODE_ENV !== 'production',
    baseURL: process.env.NODE_ENV === 'production' ? 'https://production/api/' : 'https://staging/api/',
    browserBaseURL: process.env.NODE_ENV === 'production' ? 'https://production/api/' : 'https://staging/api/',
    credentials: true,
    proxyHeaders: true,
    init (axios, ctx) {
      axios.defaults.xsrfHeaderName = 'X-CSRF-TOKEN'
    }
  },

What is expected ?

To change the default xsrfHeaderName to X-CSRF-TOKEN

What is actually happening?

When I make requests on my API's, I get error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://staging/api/transaction?_format=json. (Reason: missing token ‘x-xsrf-token’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).
(Notice the xsrf, not csrf)

Additional comments?

If I create a nuxt-client-init.jswith:

export default ({ app }) => {
 app.$axios.defaults.xsrfHeaderName = 'X-CSRF-TOKEN'
}

and in my nuxt.config.js I put

  plugins: [
    { src: '~/plugins/nuxt-client-init.js', ssr: false },
  ],

It works as expected.

bug
0
ozakha
0
ozakha
commented 8 months ago

Actually, I came across on the same issue.
I also use vue-mc lib, and expect to set baseURL, headers globally, and, set Authorization token via intercepters.request for both: integrated $axios and for axios in models/collections.
I used nuxt plugin and tried do it in 3 ways:
1) via axios.defaults
2) via interceptor of origin axios
3) via helper of integrated $axios onRequest (which is the sugar method for 2))
And, unfortunately, no success.

0
MicroDreamIT
0
MicroDreamIT
commented 8 months ago

I am having same issue.

0
ricardogobbosouza
1.1k
ricardogobbosouza
commented 6 months ago

Hi @kirillbunin
I think this option init does not exist, is not documented anywhere

0
pi0
37.3k
pi0
commented 6 months ago
  1. I'm not sure we support xsrfHeaderName name. (cc @@ricardogobbosouza)
  2. The default value for xsrfHeaderName option in axios is already 'X-XSRF-TOKEN' there is no need to provide it again! See docs
  3. For using a custom (other than X-CSRF-TOKEN) header name, see extend section.

plugins/axios.js

export default function ({ $axios }) {
    $axios.defaults.xsrfHeaderName = 'SOMETHING-ELSE'
}
0
ricardogobbosouza
1.1k
ricardogobbosouza
commented 6 months ago

@pi0 The default value for xsrfHeaderName option in axios is X-XSRF-TOKEN not X-CSRF-TOKEN

0
pi0
37.3k
pi0
commented 6 months ago

@ricardogobbosouza Ah now I see. Maybe we can add an option as you proposed if it has a common usage? (BTW i think for general defaults extending of this issue plugin method always works)

0
ricardogobbosouza
1.1k
ricardogobbosouza
commented 6 months ago

@pio I see no need, if necessary the user create a plugin as you mentioned https://github.com/nuxt-community/axios-module/issues/256#issuecomment-544729304

0
Informations
Bug ReportOpen
#c253 - Created 10 months ago