Vue3で別オリジンからデータを取得する【備忘録】

別オリジンから情報を入手する際に毎度躓くので、取得の仕方の例をここに記そうと思う。

環境

• Windows
• Vue3

取得方法

vue.config.jsファイルを用いてプロキシの設定をする。
devServerのproxyにプロキシサーバのurlを設定する。

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer:{
    proxy:"https://example.com"
  }
})

axios.get(url)を用いて同一オリジンの変数urlに指定してあるエンドポイントにリクエストを送り、404エラーが投げられる前にプロキシサーバを経由して、再度変数urlに指定してあるエンドポイントへリクエストを行い、レスポンスを取得する。

hoge.vue

<script>
import axios from "axios";
export default {
  mounted(){
    const url = "/api"; 
    axios.get(url)
    .then(response => {
        console.log(response.data)
    })
    .catch((error)=>{
        console.log(error);
    })
  }
}
</script>

まとめ

今回は別オリジンからデータを取得するために、vue.config.jsファイルを用いてプロキシの設定を行い、プロキシサーバを経由してデータを得る方法を記した。
始めての投稿でうまく書けていないと思うので、ご指摘等ありましたらよろしくお願いしたい。