外部API呼び出し時にaxiosでCORSエラー #Vue.js

外部APIを利用しようとしたところCORSエラーが起きた。

エラーが起きる悪いパターン

error_pattern.vue

<script>
export default {
  async asyncData(context){
    const response = await context.$axios.$get('外部APIのURL')
    console.log(response.data)
    return { getData: response.data }
  }
}
</script>

良いパターン

ok_pattern.vue

<script>
import axios from 'axios'
export default {
  async asyncData(){
    const response = await axios.get('外部APIのURL')
    console.log(response.data)
    return { getData: response.data }
  }
}
</script>