From 55f994f1627798f36174a14edd28fe7a5e4e70e7 Mon Sep 17 00:00:00 2001
From: pooya parsa <pyapar@gmail.com>
Date: Mon, 14 Dec 2020 12:58:14 +0100
Subject: [PATCH] fix: preserve default headers with custom headers (#452)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Gábor Egyed <gabor.egyed@gmail.com>
---
 lib/plugin.js                      |  9 ++++++--
 test/axios.test.js                 | 10 ++++-----
 test/fixture/api.js                | 20 -----------------
 test/fixture/api/cookie.js         |  4 ++++
 test/fixture/api/echo.js           | 17 +++++++++++++++
 test/fixture/nuxt.config.js        |  7 ++++--
 test/fixture/pages/asyncData.vue   |  2 +-
 test/fixture/pages/cancelToken.vue | 28 +++++++++++++-----------
 test/fixture/pages/cookie.vue      | 35 ++++++++++++++++++++++++++++++
 test/fixture/pages/mounted.vue     |  2 +-
 test/fixture/pages/ssr.vue         | 14 ++++++------
 11 files changed, 97 insertions(+), 51 deletions(-)
 delete mode 100644 test/fixture/api.js
 create mode 100644 test/fixture/api/cookie.js
 create mode 100644 test/fixture/api/echo.js
 create mode 100644 test/fixture/pages/cookie.vue

diff --git a/lib/plugin.js b/lib/plugin.js
index a12ee44..c6bc558 100644
--- a/lib/plugin.js
+++ b/lib/plugin.js
@@ -61,11 +61,16 @@ const createAxiosInstance = axiosOptions => {
   // Extend axios proto
   extendAxiosInstance(axios)
 
+  // Intercept to apply default headers
+  axios.onRequest((config) => {
+    config.headers = { ...axios.defaults.headers.common, ...config.headers }
+  })
+
   // Setup interceptors
   <% if (options.debug) { %>setupDebugInterceptor(axios) <% } %>
-  <% if (options.credentials) { %>setupCredentialsInterceptor(axios)<% } %>
+  <% if (options.credentials) { %>setupCredentialsInterceptor(axios) <% } %>
   <% if (options.progress) { %>setupProgress(axios) <% } %>
-  <% if (options.retry) { %>axiosRetry(axios, <%= serialize(options.retry) %>)<% } %>
+  <% if (options.retry) { %>axiosRetry(axios, <%= serialize(options.retry) %>) <% } %>
 
   return axios
 }
diff --git a/test/axios.test.js b/test/axios.test.js
index 396f891..d0ce27b 100644
--- a/test/axios.test.js
+++ b/test/axios.test.js
@@ -32,8 +32,8 @@ const testSuite = () => {
     const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js'))
     const options = call[0].options
     const proto = options.https ? 'https' : 'http'
-    expect(options.baseURL.toString()).toBe(`${proto}://localhost:3000/test_api`)
-    expect(options.browserBaseURL.toString()).toBe('/test_api')
+    expect(options.baseURL.toString()).toBe(`${proto}://localhost:3000/api`)
+    expect(options.browserBaseURL.toString()).toBe('/api')
   })
 
   test('asyncData', async () => {
@@ -121,7 +121,7 @@ describe('module', () => {
 describe('other options', () => {
   beforeAll(async () => {
     config.axios = {
-      prefix: '/test_api',
+      prefix: '/api',
       proxy: {},
       credentials: true,
       https: true,
@@ -141,7 +141,7 @@ describe('other options', () => {
 describe('browserBaseURL', () => {
   beforeAll(async () => {
     config.axios = {
-      browserBaseURL: '/test_api'
+      browserBaseURL: '/api'
     }
 
     await setupNuxt(config)
@@ -156,7 +156,7 @@ describe('browserBaseURL', () => {
     const call = addTemplate.mock.calls.find(args => args[0].src.includes('plugin.js'))
     const options = call[0].options
     expect(options.baseURL.toString()).toBe('http://localhost:3000/')
-    expect(options.browserBaseURL.toString()).toBe('/test_api')
+    expect(options.browserBaseURL.toString()).toBe('/api')
   })
 })
 
diff --git a/test/fixture/api.js b/test/fixture/api.js
deleted file mode 100644
index b2c3a6b..0000000
--- a/test/fixture/api.js
+++ /dev/null
@@ -1,20 +0,0 @@
-function sleep (ms) {
-  return new Promise((resolve) => {
-    setTimeout(resolve, ms)
-  })
-}
-
-module.exports = {
-  path: '/test_api',
-  async handler (req, res) {
-    const query = new URL(req.url, 'http://localhost:3000').query
-    if (query && query.delay) {
-      await sleep(query.delay)
-    }
-
-    res.end(JSON.stringify({
-      url: req.url,
-      method: req.method
-    }))
-  }
-}
diff --git a/test/fixture/api/cookie.js b/test/fixture/api/cookie.js
new file mode 100644
index 0000000..fb15e1f
--- /dev/null
+++ b/test/fixture/api/cookie.js
@@ -0,0 +1,4 @@
+export default (req, res) => {
+  const reqCookie = (new URLSearchParams(req.headers.cookie || '').get('mycookie') || '').split(';')[0].trim()
+  res.end(reqCookie || '')
+}
diff --git a/test/fixture/api/echo.js b/test/fixture/api/echo.js
new file mode 100644
index 0000000..a88ad1f
--- /dev/null
+++ b/test/fixture/api/echo.js
@@ -0,0 +1,17 @@
+export default async (req, res) => {
+  const query = new URL(req.url, 'http://localhost:3000').query
+  if (query && query.delay) {
+    await sleep(query.delay)
+  }
+
+  res.end(JSON.stringify({
+    url: req.url,
+    method: req.method
+  }))
+}
+
+function sleep (ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms)
+  })
+}
diff --git a/test/fixture/nuxt.config.js b/test/fixture/nuxt.config.js
index f09b76e..85f62a8 100644
--- a/test/fixture/nuxt.config.js
+++ b/test/fixture/nuxt.config.js
@@ -10,9 +10,12 @@ module.exports = {
   modules: [
     { handler: require('../../') }
   ],
-  serverMiddleware: ['~/api.js'],
+  serverMiddleware: {
+    '/api/echo': '~/api/echo',
+    '/api/cookie': '~/api/cookie'
+  },
   axios: {
-    prefix: '/test_api',
+    prefix: '/api',
     proxy: true,
     credentials: true,
     debug: true,
diff --git a/test/fixture/pages/asyncData.vue b/test/fixture/pages/asyncData.vue
index 6831346..b37d3ad 100644
--- a/test/fixture/pages/asyncData.vue
+++ b/test/fixture/pages/asyncData.vue
@@ -7,7 +7,7 @@
 <script>
 export default {
   async asyncData ({ app }) {
-    const res = await app.$axios.$get('foo/bar')
+    const res = await app.$axios.$get('echo/foo/bar')
     return {
       res
     }
diff --git a/test/fixture/pages/cancelToken.vue b/test/fixture/pages/cancelToken.vue
index 25b901d..246471e 100644
--- a/test/fixture/pages/cancelToken.vue
+++ b/test/fixture/pages/cancelToken.vue
@@ -1,33 +1,35 @@
 <template>
   <div>
     there should be no loading bar left over:
-    <button @click="test">Fake Request</button>
+    <button @click="test">
+      Fake Request
+    </button>
   </div>
 </template>
 
 <script>
 export default {
   methods: {
-    test() {
-      const source = this.$axios.CancelToken.source();
+    test () {
+      const source = this.$axios.CancelToken.source()
       this.$axios
         .$post(
-          "http://localhost:3000/test_api/foo/bar?delay=1000",
-          { data: "test" },
+          'http://localhost:3000/api/echo/foo/bar?delay=1000',
+          { data: 'test' },
           {
-            cancelToken: source.token,
+            cancelToken: source.token
           }
         )
         .catch((err) => {
           if (this.$axios.isCancel(err)) {
-            console.log("request canceled");
+            console.log('request canceled')
           }
-        });
+        })
 
       setTimeout(function () {
-        source.cancel();
-      }, 500);
-    },
-  },
-};
+        source.cancel()
+      }, 500)
+    }
+  }
+}
 </script>
diff --git a/test/fixture/pages/cookie.vue b/test/fixture/pages/cookie.vue
new file mode 100644
index 0000000..33fa5b6
--- /dev/null
+++ b/test/fixture/pages/cookie.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <pre style="display: none">_req:{{ reqCookie }}</pre>
+    <p>Pass: {{ pass }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData ({ app }) {
+    const reqCookie = (await app.$axios.$get('/cookie', {
+      headers: { Accept: 'application/json' }
+    })) + ''
+    return {
+      reqCookie
+    }
+  },
+  data () {
+    return {
+      pass: '?'
+    }
+  },
+  async mounted () {
+    const randomValue = Math.round(Math.random() * 1000) + ''
+    document.cookie = `mycookie=${randomValue}; path=/`
+
+    // Render page with server-side, expecting to be rendered with same new cookie
+    const html = await this.$axios.$get(window.location.href)
+    const m = html.match(/_req:(\w+)/)
+    const profifiedSSRCookie = m && m[1]
+
+    this.pass = randomValue === profifiedSSRCookie
+  }
+}
+</script>
diff --git a/test/fixture/pages/mounted.vue b/test/fixture/pages/mounted.vue
index 4c790ba..3f8f78b 100644
--- a/test/fixture/pages/mounted.vue
+++ b/test/fixture/pages/mounted.vue
@@ -14,7 +14,7 @@ export default {
 
   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')
+    this.res = await this.$axios.$get('http://localhost:3000/api/echo/foo/bar')
   }
 }
 </script>
diff --git a/test/fixture/pages/ssr.vue b/test/fixture/pages/ssr.vue
index 059b47c..0134c29 100644
--- a/test/fixture/pages/ssr.vue
+++ b/test/fixture/pages/ssr.vue
@@ -12,6 +12,12 @@
 let reqCtr = 1
 
 export default {
+  fetch ({ app, route }) {
+    const doLogin = route.query.login !== undefined
+    if (doLogin) {
+      app.$axios.setHeader('SessionId', reqCtr++)
+    }
+  },
   computed: {
     axiosSessionId () {
       return this.$axios.defaults.headers.common.SessionId
@@ -23,7 +29,7 @@ export default {
       return this.newInstance.defaults.headers.common.SessionId
     },
     newInstanceHeaders () {
-      return this.newInstance.defaults.headers
+      return this.newInstance.defaults.headers.common
     }
   },
   created () {
@@ -32,12 +38,6 @@ export default {
         'X-Requested-With': 'XMLHttpRequest'
       }
     })
-  },
-  fetch ({ app, route }) {
-    const doLogin = route.query.login !== undefined
-    if (doLogin) {
-      app.$axios.setHeader('SessionId', reqCtr++)
-    }
   }
 }
 </script>