github pagesのcorsを解消したい（Vue CLI）

Question

前提・実現したいこと

github pagesのcorsを解消したい
公開したアプリケーションは、Vue cliで作成し、axiosで天気予報apiから値を取得するものです。
この場合、どんな解決策が考えられますか？

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

下記APIを利用し、天気を取得・表示するものを制作しました。
https://www.metaweather.com/api/

開発環境では、chromeの拡張機能を使って、CORSのエラーを無視することで、使うことが出来ました。
しかし、github pagesに公開すると

Access to XMLHttpRequest at 'https://www.metaweather.com/api/location/1118370' from origin 'https://******.github.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Weather.vue:61

これが、コンソールで確認できるエラーです。

試したこと

下記のように、URLをつなげる方法を試したが、失敗
'https://****.github.io/https://www.metaweather.com/api/location/15015370/'

参考URL
https://medium.com/@deepak13245/using-react-hooks-to-handle-api-calls-d6bb4ae91188

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

• vue cli 4.5

Comments

[hoshi-takanori]

metaweather は CORS をサポートしてないようです。で、開発環境に拡張機能を入れて CORS を無視するというのは、あくまで開発環境であり、自分だけしかアクセスしないから許されることで、github pages で世界中に公開するのはどうかと思います。

[sohh]

なるほど。
APIの利用を始めたばかりで、理解がたりませんでした。指摘いただきありがとうございます。

Answer 1

hoshi-takanori さんから既にコメントがありますが、metaweatherはCORS対応しておらず、JSONPにも対応していないようです。なのでブラウザから呼び出すのは不可能です。このAPIをサーバーから呼び出して利用する方法しかないように思えます。

（追記）
参考URLの方法は、まさにmetaweatherのAPIを中継してCORS対応にするPROXY（サーバー）を作ったというもので、URLを二段重ねにしたら勝手にPROXYになるわけではありません。

Comments

[sohh]

github pagesで公開（サーバー側使用してない）の場合、proxyで対応する手段がある。という理解でよろしいでしょうか？
回答いただきありがとうございます！

[ockeghem]

proxyは自前で用意する必要があります。参照記事では、そのproxyをheroku上に用意しています。

[sohh]

参照記事では、heroku上で自前で用意していたということなんですね。
問題の概要がはっきりしました。ありがとうございます。