Vue.jsから開発モードでクロスドメインのアクセス

開発時のVueとサーバサイドのポート番号

VueでサーバサイドのAPIを使用する開発をしており、サーバサイドのサーバも起動させている場合、Vueとサーバサイドのポート番号は異なることと思います。
Vueで「npm run dev」コマンドを使用して開発している場合、デフォルトではlocalhost:3000ですよね。
一方サーバサイド側はプログラムによって変わってきますが、localhost:8080を使うものとします。

ポート番号が異なることでの問題点

この時問題になるのが、CSS（クロスサイトスクリプティング）の問題です。
同じlocalhostとは言え、ポートが異なっていることより別なドメイン扱いになってしまうのです。
サーバサイド側でCORS（Cross-Origin Resource Sharing）の設定を入れてlocalhost:3000からのアクセスを許可することも可能ですが、開発環境であればVue側の設定でも解決できます。

proxyTableで解決

開発環境の場合はproxyTableの設定で解決可能です。
proxyTableを使えば、本来はlocalhost:3000からのアクセスでもlocalhost:8080からアクセスされたことと偽ることができるのです。

vue/config/index.jsに以下を追加しましょう。
以下はあくまで例であり、「/api」以下にアクセスする場合、つまり「http://localhost:8080/api」以下にアクセスする場合の設定です。

module.exports = {
  dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

以下のようにカンマ区切りで複数設置することもできます。

module.exports = {
  dev: {
    proxyTable: {
      '/api1': {
        target: 'http://localhost:8080',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

これらはあくまで開発時の設定です。
本番環境ではCORSの設定を適切にしましょうね。