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

* feat: allow adding custom headers with nuxt config

* fix: Ky headers are simple

* docs: `setToken` not accept custom headers

* style: indentation

docs/api/readme.md

@@ -145,3 +145,17 @@ When directing requests at a url protected by CloudFlare's CDN you should set th
 * Default `['accept', 'host', 'cf-ray', 'cf-connecting-ip', 'content-length']`
 
 Only efficient when `proxyHeaders` is set to true. Removes unwanted request headers to the API backend in SSR.
+
+### `headers`
+
+Headers added to all requests. If provided, will be merged with the defaults.
+
+* Default: `{}`
+
+:::tip Note
+Do NOT include any credentials or tokens here. One can easily access them.
+:::
+
+:::tip 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.
+:::

docs/guide/advanced.md

@@ -107,9 +107,6 @@ this.$http.setToken('456')
 // Adds header: `Authorization: Bearer 123` to all requests
 this.$http.setToken('123', 'Bearer')
 
-// Adds header: `Authorization: Bearer 123` to only post and delete requests
-this.$http.setToken('123', 'Bearer', ['post', 'delete'])
-
 // Removes default Authorization header
 this.$http.setToken(false)
 ```

lib/module.js

@@ -45,6 +45,7 @@ function httpModule (_moduleOptions) {
     serverTimeout: false,
     clientTimeout: false,
     https: false,
+    headers: {},
     ...moduleOptions
   }
 

lib/plugin.js

@@ -11,7 +11,6 @@ class HTTP {
     this._ky = ky
   }
 
-
   setBaseURL (baseURL) {
     this._defaults.prefixUrl = baseURL
   }
@@ -26,7 +25,7 @@ class HTTP {
 
   setToken(token, type) {
     const value = !token ? null : (type ? type + ' ' : '') + token
-    this.setHeader('authorization', value)
+    this.setHeader('Authorization', value)
   }
 
   _hook(name, fn) {
@@ -111,19 +110,26 @@ export default (ctx, inject) => {
       ? '<%= options.browserBaseURL %>'
       : (process.env._HTTP_BASE_URL_ || '<%= options.baseURL %>')
 
+  const headers = <%= JSON.stringify(options.headers, null, 2) %>
+
   // Defaults
   const defaults = {
     retry: <%= options.retry %>,
     timeout: process.server ? <%= options.serverTimeout %> : <%= options.clientTimeout %>,
     prefixUrl,
-    headers: {}
+    headers
   }
 
   <% if (options.proxyHeaders) { %>
   // Proxy SSR request headers headers
-  defaults.headers = (ctx.req && ctx.req.headers) ? { ...ctx.req.headers } : {}
-  <% for (let h of options.proxyHeadersIgnore) { %>delete defaults.headers['<%= h %>']
-  <% } %><% } %>
+  if (process.server && ctx.req && ctx.req.headers) {
+    const reqHeaders = { ...ctx.req.headers }
+    for (let h of <%= serialize(options.proxyHeadersIgnore) %>) {
+      delete reqHeaders[h]
+    }
+    defaults.headers = { ...reqHeaders, ...defaults.headers }
+  }
+  <% } %>
 
   if (process.server) {
     // Don't accept brotli encoding because Node can't parse it

test/fixture/pages/instance.vue

@@ -1,13 +1,15 @@
 <template>
   <div>
     <div>prefixUrl:{{ defaults.prefixUrl }}</div>
-    <div v-for="(value, key) in defaults.headers" :key="key">{{ key }}:{{ value }}</div>
+    <div v-for="(value, key) in defaults.headers" :key="key">
+      {{ key }}:{{ value }}
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  asyncData({ app: { $api } }) {
+  asyncData ({ app: { $api } }) {
     return {
       defaults: $api._defaults
     }

test/fixture/pages/ssr.vue

@@ -10,20 +10,20 @@
 let reqCtr = 1
 
 export default {
-  computed: {
-    httpSessionId() {
-      return this.$http._defaults.headers.SessionId
-    },
-
-    httpEncoding() {
-      return this.$http._defaults.headers['accept-encoding']
-    }
-  },
-  fetch({ app, route }) {
+  fetch ({ app, route }) {
     const doLogin = route.query.login !== undefined
     if (doLogin) {
       app.$http.setHeader('SessionId', reqCtr++)
     }
+  },
+  computed: {
+    httpSessionId () {
+      return this.$http._defaults.headers.SessionId
+    },
+
+    httpEncoding () {
+      return this.$http._defaults.headers['accept-encoding']
+    }
   }
 }
 </script>