Nuxt 本地端加載 HTTPS

前言

本篇比較偏向筆記，因為前陣子引入第三方登入時，需要在本地端加上 HTTPS 才可以繼續測試。

途中查了很久才查到引入方式，在這邊做個紀錄 XＤ

目錄

• 設定
• 問題排解
  - 連線不穩定
  - socket hang up

設定

先來看看官網的介紹…摁感覺蠻簡單的（？

關於 SSL 證書我們可以使用之前介紹過的 mkcert，安裝參考這篇。
接著移到專案資料夾下生產證書：

$ mkcert localhost 127.0.0.1

打完指令後會出現兩個 pem 檔，跟上圖的 key 與 crt 檔不同但一樣吃得到。接著需要安裝 path 與 fs 套件來讀取檔案：

$ npm install path fs --save

安裝完後在 nuxt.config.js 引入並貼上指令就好：

到這邊是官網寫的，但事情沒有這麼簡單…還需要到 server/index.js 內做些設定。

app.listen(port, host);

把上面這行改寫為以下：

https.createServer(nuxt.options.server.https, app).listen(port, host);

問題排解

連線不穩定

接著啟動測試端，你有可能會看到：

這時候需要到 Chrome 設定，搜尋 SSL 並點選更多可以看到管理憑證。

點下去後左邊篩選憑證，並把你的 pem 檔移進去後開啟。

把預設改選為信任就 ok 了。

socket hang up

這時候回到測試端，你大概會看到：

截圖自影片

這錯誤主要是因為掛載 axios 才造成的樣子，如果你使用 nuxtjs/axios 的話，可以在 nuxt.config.js 內開啟 https：

axios: {
  https: true,
},

並且新增 axios.js 在 plugin 資料夾內：

import https from 'https';
export default function ({ $axios }) {
  $axios.defaults.httpsAgent = new https.Agent({ rejectUnauthorized: 
    false });
};

記得在 nuxt.config.js 引入：

plugins: [
  '~/plugins/axios.js',
]

完成後就可以在本地端使用 HTTPS 啦 （鼓掌～

參考資料

How to run NUXT (npm run dev) with HTTPS in localhost?

Cannot create new https.Agent() within axios.init() · Issue #31 · nuxt-community/axios-module