【Vue.js】ローカルサーバーでのCORSエラー対応

必要なもの

・node.js
・Vue.js

Vue.jsローカルサーバーでのCORSエラー対応方法

CORSとは?

正式名称 Cross-Origin Resource Sharing  
簡単に言うと自分と異なるオリジンからデータをもらって表示しようとすると基本的に発生するエラーです。
自分のドメインと同じ名前のドメインのサーバーからデータを取ってくる分には何もエラーは起きませんが、例えばGoogleのAPIを使ってGoogleの画像を自身ウェブサイト(my-domain.com)に表示しようとするとCORSのエラーが発生します。

エラーの原因

上記の例で言うとGoogleのAPIを使って帰ってくるレスポンスのドメインがhttps://google.co.jp/xxxx~であることが原因です。
このgoogle.comがmy-domain.comであればエラーが起こることはありません。

ローカルサーバーでの対応

http or httpsアクセスを自身のドメイン(localhost:xxxx)でproxyして、レスポンスをlocalhost:xxxxで帰ってくるようにする。
proxyすることでgoogleへのhttpsアクセスがlocalhost:xxxxアクセスと「見てもらえる」のでCORSエラーが発生しません。

具体的な対応

リポジトリ直下にvue.config.jsを作成し、以下を記述。

module.exports = {
    devServer: {
      proxy: {
        "https://google.co.jp": {
          target: "http://localhost:8080",
        }
      }
    }
  };

上記のコードはproxyするターゲットを”https://google.co.jp”と指定して、
targetで何に置き換えるか?を決定しています。
簡単に言うとhttp or httpsアクセスを行う際にレスポンスを自動でreplaceを行ってくれます。

httpsアクセスを行うコードは以下の通りです

await axios.get('https://google.co.jp/api/sample')

https://google.co.jp/api/sampleへアクセスを行う際にレスポンスを
http://localhost:8080/api/sampleから貰ったようにdevサーバーで変換してくれるのです。

今回はあくまでもローカルサーバーでの対応だったので、実際にリリースする際は同ドメインのサーバーサイドで一度レスポンスを貰ってからフロントに情報を送信する、別ドメインのサーバーサイドの設定で送信先を許可する等でCORSエラーに対応しましょう。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です