feat: allow adding custom headers with nuxt config (#294)

docs/options.md

@@ -43,7 +43,7 @@ Environment variable `API_URL` can be used to **override** `baseURL`.
 
 ### `browserBaseURL`
 
-* Default: `baseURL` 
+* Default: `baseURL`
 **WARNING:** when the `proxy` option is enabled the default for browserBaseURL becomes `prefix` instead of `baseURL`
 
 Defines the base URL which is used and prepended to make client side requests.
@@ -148,3 +148,24 @@ This also helps making consistent requests in both SSR and Client Side code.
 * Default `['host', 'accept', 'cf-ray', 'cf-connecting-ip', 'content-length']`
 
 This is useful and efficient only when `proxyHeaders` is set to true. Removes unwanted requests headers to the API backend in SSR.
+
+### `headers`
+
+Headers added to all requests. If provided, will be merged with the defaults.
+
+```js
+{
+    common: {
+      'Accept': 'application/json, text/plain, */*'
+    },
+    delete: {},
+    get: {},
+    head: {},
+    post: {},
+    put: {},
+    patch: {}
+}
+```
+
+- **NOTE:** Do NOT include any credentials or tokens here. One can easily access them.
+- **NOTE:** This headers are effective to ALL requests. Please take care and consider providing special headers on each call that needs this unless you are pretty sure you always need to add headers.

lib/module.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const consola = require('consola')
+const defu = require('defu')
 
 const logger = consola.withScope('nuxt:axios')
 
@@ -36,8 +37,21 @@ function axiosModule(_moduleOptions) {
   // HTTPS
   const https = Boolean(this.options.server && this.options.server.https)
 
+  // Headers
+  const headers = {
+    common: {
+      'Accept': 'application/json, text/plain, */*'
+    },
+    delete: {},
+    get: {},
+    head: {},
+    post: {},
+    put: {},
+    patch: {}
+  }
+
   // Apply defaults
-  const options = {
+  const options = defu(moduleOptions, {
     baseURL: `http://${defaultHost}:${defaultPort}${prefix}`,
     browserBaseURL: null,
     credentials: false,
@@ -48,8 +62,8 @@ function axiosModule(_moduleOptions) {
     proxy: false,
     retry: false,
     https,
-    ...moduleOptions
-  }
+    headers
+  })
 
   // ENV overrides
 
@@ -75,7 +89,7 @@ function axiosModule(_moduleOptions) {
 
   // Convert http:// to https:// if https option is on
   if (options.https === true) {
-    const https = s => s.indexOf('//localhost:') > -1 ? s : s.replace('http://', 'https://')
+    const https = s => s.includes('//localhost:') ? s : s.replace('http://', 'https://')
     options.baseURL = https(options.baseURL)
     options.browserBaseURL = https(options.browserBaseURL)
   }

lib/plugin.js

@@ -156,17 +156,7 @@ export default (ctx, inject) => {
   // Create fresh objects for all default header scopes
   // Axios creates only one which is shared across SSR requests!
   // https://github.com/mzabriskie/axios/blob/master/lib/defaults.js
-  const headers = {
-    common : {
-      'Accept': 'application/json, text/plain, */*'
-    },
-    delete: {},
-    get: {},
-    head: {},
-    post: {},
-    put: {},
-    patch: {}
-  }
+  const headers = <%= JSON.stringify(options.headers, null, 4) %>
 
   const axiosOptions = {
     baseURL,

package.json

@@ -26,7 +26,8 @@
     "@nuxtjs/proxy": "^1.3.3",
     "axios": "^0.19.0",
     "axios-retry": "^3.1.2",
-    "consola": "^2.10.1"
+    "consola": "^2.10.1",
+    "defu": "^0.0.3"
   },
   "devDependencies": {
     "@babel/core": "latest",

test/fixture/pages/asyncData.vue

@@ -6,7 +6,7 @@
 
 <script>
 export default {
-  async asyncData({ app }) {
+  async asyncData ({ app }) {
     const res = await app.$axios.$get('foo/bar')
     return {
       res

test/fixture/pages/mounted.vue

@@ -6,13 +6,13 @@
 
 <script>
 export default {
-  data() {
+  data () {
     return {
       res: ''
     }
   },
 
-  async mounted() {
+  async mounted () {
     // Request with full url becasue we are in JSDom env
     this.res = await this.$axios.$get('http://localhost:3000/test_api/foo/bar')
   }

test/fixture/pages/ssr.vue

@@ -11,15 +11,15 @@ let reqCtr = 1
 
 export default {
   computed: {
-    axiosSessionId() {
+    axiosSessionId () {
       return this.$axios.defaults.headers.common.SessionId
     },
 
-    axiosEncoding() {
+    axiosEncoding () {
       return this.$axios.defaults.headers.common['accept-encoding']
     }
   },
-  fetch({ app, route }) {
+  fetch ({ app, route }) {
     const doLogin = route.query.login !== undefined
     if (doLogin) {
       app.$axios.setHeader('SessionId', reqCtr++)