feat: get custom http headers

Author: hisasann

package.json

@@ -56,6 +56,8 @@
     "@nuxtjs/pwa": "^3.0.0-beta.14",
     "@nuxtjs/sentry": "^2.3.1",
     "@types/webpack": "^4.4.26",
+    "@ungap/url-search-params": "^0.1.2",
+    "body-parser": "^1.18.3",
     "cross-env": "^5.2.0",
     "express": "^4.16.4",
     "js-cookie": "^2.2.0",

src/pages/example/ajax/custom-http-headers.vue

@@ -0,0 +1,72 @@
+<template lang="pug">
+  div
+    h1.title
+      | custom-http-headers
+    hr
+    h2 data
+    p {{ data }}
+    hr
+    h2 headers
+    p {{ headers['from-server'] }}
+</template>
+
+<script lang="ts">
+import * as querystring from 'querystring'
+import { Component, Vue } from 'nuxt-property-decorator'
+import axios from 'axios'
+import URLSearchParams from '@ungap/url-search-params'
+
+@Component
+export default class UserAgent extends Vue {
+  data: string = ''
+
+  async asyncData({ $axios }) {
+    $axios.defaults.headers.post['post-header'] = 'post-header1' // for POST requests
+    $axios.defaults.headers.common['common-header'] = 'common-header1' // for all requests
+
+    const params = new URLSearchParams()
+    params.append('param1', 'value1')
+    params.append('param2', 'value2')
+
+    const { data, headers, status, statusText, config } = await $axios.post(
+      `http://localhost:5000/custom-headers`,
+      { hoge: 'hoge' },
+      // x-www-form-urlencoded で渡したい場合は Browser と node.js でデータの作り方が変わってきます
+      // https://github.com/axios/axios#using-applicationx-www-form-urlencoded-format
+      // https://developer.mozilla.org/ja/docs/Web/HTTP/Methods/POST
+      // Browser では URLSearchParams を使い、 node.js では querystring を使います
+      // また、axiosでPOSTでRequestしているつもりがOPTIONSで送信している場合は、
+      // https://qiita.com/hiryu/items/cdb606542d960402e592
+      // このあたりを検討する必要があるかもしれません
+      // process.server ? querystring.stringify({ foo: 'bar' }) : params,
+      {
+        headers: {
+          header1: 'custom1'
+        }
+      }
+    )
+
+    console.log(
+      'headers:',
+      headers,
+      'status:',
+      status,
+      'statusText:',
+      statusText,
+      'config:',
+      config
+    )
+
+    return {
+      data,
+      headers
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+h2 {
+  color: crimson;
+}
+</style>

src/pages/example/index.vue

@@ -11,6 +11,9 @@
     p
       nuxt-link(to='/example/ajax/schema')
         | schema
+    p
+      nuxt-link(to='/example/ajax/custom-http-headers')
+        | custom-http-headers
     p
       nuxt-link(to='/example/c-01/e-02/', no-prefetch)
         | custom-path /c-01/e-02/
@@ -53,6 +56,9 @@
     p
       nuxt-link(to='/example/dynamic-import')
         | dynamic-import
+    p
+      nuxt-link(to='/example/user-agent')
+        | user-agent
 </template>
 
 <script lang="ts">

tools/server.js

@@ -1,22 +1,39 @@
 const express = require('express')
 const app = express()
 
+// https://blog.ryo4004.net/web/306/
+// method: post のために必須
+const bodyParser = require('body-parser')
+app.use(bodyParser.urlencoded({ extended: true }))
+app.use(bodyParser.json())
+
 // Example directories as static files
 app.use(express.static('src/static'))
 
 app.use((req, res, next) => {
   res.header('Access-Control-Allow-Origin', '*')
   res.header(
     'Access-Control-Allow-Headers',
-    'Origin, X-Requested-With, Content-Type, Accept'
+    // 'origin, x-requested-with, content-type, accept'
+    '*'
   )
+  // https://stackoverflow.com/questions/37897523/axios-get-access-to-response-header-fields
+  // https://github.com/axios/axios/issues/606
+  // Access-Control-Expose-Headers を追加しないとカスタムレスポンスヘッダーをブラウザに返すことはできない
+  res.header('Access-Control-Expose-Headers', 'from-server')
   next()
 })
 
+/**
+ * get '/'
+ */
 app.get('/', function(req, res) {
   res.send('Hello World')
 })
 
+/**
+ * get '/api-waiting-for-5-seconds'
+ */
 app.get('/api-waiting-for-5-seconds', function(req, res) {
   setTimeout(() => {
     res.send(
@@ -30,4 +47,25 @@ app.get('/api-waiting-for-5-seconds', function(req, res) {
   }, 5000)
 })
 
+/**
+ * get '/headers'
+ */
+app.get('/headers', (req, res) => {
+  res.send(JSON.stringify(req.headers))
+})
+
+/**
+ * post '/custom-headers'
+ */
+app.post('/custom-headers', (req, res) => {
+  console.log(req.body)
+
+  // カスタムレスポンスヘッダーをセットします
+  res.set({
+    'from-server': 'server1'
+  })
+
+  res.send(JSON.stringify(req.headers))
+})
+
 app.listen(5000)

yarn.lock

@@ -2489,6 +2489,11 @@
     lodash.unescape "4.0.1"
     semver "5.5.0"
 
+"@ungap/url-search-params@^0.1.2":
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/@ungap/url-search-params/-/url-search-params-0.1.2.tgz#8ba8c0527543fe675d1c29ae0a2daca842e8ee4f"
+  integrity sha512-WVk5+lJ+AoNLh2sIDMhnEAgLsVQuI067hWLJCzirErH1GYiy1gs09q4+XZxYWSvdAsslKsaO4q1iXXMx2c72dA==
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.0.0-beta.2":
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.0.0-beta.2.tgz#f3e20d77b89ddb7a4b9b7a75372f05cd3ac22d92"
@@ -3528,7 +3533,7 @@ bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.1.1, bn.js@^4.4.0:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.8.tgz#2cde09eb5ee341f484746bb0309b3253b1b1442f"
 
-body-parser@1.18.3:
+body-parser@1.18.3, body-parser@^1.18.3:
   version "1.18.3"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.18.3.tgz#5b292198ffdd553b3a0f20ded0592b956955c8b4"
   dependencies: