VueのaxiosにてCORSが発生してAPIに接続ができない

Question

前提・実現したいこと

Vueのaxiosを利用して外部APIに接続しようとしたところ、CORSが発生。
vue.config.jsを利用してプロキシを設定して対応しようとしているが解消されない。

現在は下記のような流れになっているはず
http://localhost:8080 -> https://〇〇.jp/aaa/bbb/...

これをプロキシを設定して下記のようにしたい
http://10.0.0.0:1111 -> https://〇〇.jp/aaa/bbb/...

発生している問題・エラーメッセージ

Access to XMLHttpRequest at 'https://〇〇.jp/aaa/bbb/ccc/ddd?hoge=huga&piyo=para' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

該当のソースコード

<template>
  <div>
    <button @click="test">api test</button>
  </div>
</template>

// script内を一部抜粋
<script>
import axios from 'axios'

export default {
  data () {
    return {
      axios: axios,
      path: 'https://〇〇.jp/aaa/bbb/ccc/ddd?hoge=huga&piyo=para'
    }
  },
  methods: {
    test () {
      this.axios
        .get(this.path)
        .then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

試したこと

下記ディレクトリ構成において該当箇所にvue.config.jsを作成

// 一階層のみ
project
├─node_module
├─public
├─src
├─router
├─views
├─main.js
├─babel.config.js
├─package.json
├─vue.config.js   // ここに作成

module.exports = {
  devServer: {
    proxy: {
      '/aaa': {
        target: 'http://10.0.0.0:1111'
      }
    }
  }
};

補足情報（FW/ツールのバージョンなど）

config.jsを用いなくても別に問題ない等ございましたらご教授いただけると幸いです。

Comments

[hoshi-takanori]

vue のコードでは path: '/aaa/bbb/ccc/ddd?hoge=huga&piyo=para' として、vue.config.js には '/aaa': { target: 'https://〇〇.jp' } とすべきなのでは。
https://webpack.js.org/configuration/dev-server/#devserverproxy