はじめに

Vue.jsによる開発においてAPIのBasic認証の実装をしました。
エラーについての検索をした際に類似のケースで苦しんでいる方が国内外問わず多くいらっしゃったので、本記事では私が嵌ったエラーと解決策の一例について書いていきます。
当記事の使用言語はVue.jsとNode.jsです。

課題の切り分け

実装に当たって私が悩んだ点は大きく分けて下記二つとなります。
・CORSの不一致
・非同期処理の中でBasic認証が出来ない（404エラーが返ってくる）

◎CORSの不一致

APIのBase URLに対してGETでデータの取得を初めて求めた際に、

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access. If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

以上のエラーが返ってきた。

エラーはどうやら「same-origin」と呼ばれるセキュリティポリシーにより、ブラウザが同一のドメインを持つアプリケーションのみと対話するように保護されているためであり、

Google先生に質問をしたところ、VueではProxyの設定でCORSのエラーを回避出来ることが分かり、configを設定するファイルに下記のような記述をした。

module.exports={devServer:{// proxy all requests starting with /api to jsonplaceholder"/testapi":{target:"https://api.test.hogehoge.jp/",changeOrigin:true,pathRewrite:{"^/testapi":""}}}

公式「フロントエンドアプリとバックエンドAPIサーバーが同じホスト上で実行されていない場合は、開発中にAPIリクエストをAPIサーバーにプロキシする必要がある」・・・。
改めてドキュメントを読み込む大切さを思い知った・・・🤔

ちなみにCORSについてはこちらの記事が大変分かりやすかったです、ありがとうございます！

◎非同期処理の中でBasic認証が出来ない（404エラーが返ってくる）

CORSの問題を解決して一件落着！と思いきや、GETして拾ってきたのはJsonではなく404エラーだった。

エラーはBasic認証の部分で発生しており、axiosを利用した非同期処理のロジックを組みながら最終的に下記のようなコードで実装をした。

getApiData({commit}){constclientId="hoge";constclientSecret="test";//Basic認証のために、base64でエンコードするconstencodedData=Buffer.from(clientId+":"+clientSecret).toString("base64");axios.get("/testapi",{withCredentials:true,headers:{Authorization:"Basic "+encodedData}}).then(function(response){console.log("成功");}).catch(function(error){console.log("失敗");});}

これは定型文的に決まってルールとして、
Basic認証がかかったURLにアクセスする場合にはAuthorizationヘッダーへ向けて、

Authorization: Basic <Base64エンコードしたユーザ名:パスワード>

以上をリクエストをする必要があるようだった。

おわりに

今回APIを扱うに当たって、はじめてポストマン を使ってみたところ、素早くテストをすることが出来ました。学習コストはほとんどなく、直感的に扱えたので次回以降も継続して利用をしていこうと思います。