APIを使用したいが、CORSで使用できない

Question

API の勉強をしていて、CORSでつまずいています。

Access to fetch at 'https://www.metaweather.com/api/location/44418/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

ググると、サーバー側でAccess-Control-Allow-Originヘッダをつけると解決すると書いてありました。
つまり、クライアント側では、どうしようもないということでしょうか？
もし、この時点で検討違いなことをいってたら、訂正してください。

ソースコードはこちらになります。
visual stuiod code からlive server を起動して確かめております。

        fetch('https://www.metaweather.com/api/location/44418/', {
            mode: 'cors',
        })
        .then(result => {
            console.log(result);
            return result.json();
        })
        .then(data => {
            console.log(data);
        })
        .catch(error => {
            console.log(error);
        });

具体的に上記のjavascriptのソースコードを修正すればよいのか、
それとも全く別の設定が必要なのか分かっていないので、教えてください。

Answer 1

API の勉強をしていて、

JavascriptからAPIを叩く勉強をしているという事であれば、
CORS問題の発生しない他のAPIを探して使うのが楽で正しい方法かと思います。

以下回答

ググると、サーバー側でAccess-Control-Allow-Originヘッダをつけると解決すると書いてありました。
つまり、クライアント側では、どうしようもないということでしょうか？

基本的にはその認識で間違いありません。
Javascriptからのアクセスを想定していないAPIだと思われます。

対応としては以下のどちらかになります。

1. 何らかの言語を使って、サーバサイドに踏み台なるなるようなプログラムを作る。Javascriptはその踏み台と通信し、踏み台はAPIと通信して結果をJavascriptに返すようにする。

今回の場合だとlocalhostだと思われるので、以下の様な通信経路になり、Javascriptはlocalhostとのみ通信するのでCORSの制限がかかりません。
Javascript---踏み台(localhost)---API

1. ブラウザの設定を変更し、CORSを無視して通信出来る様にする。

サービスとして公開する場合は使える方法ではありませんが、勉強や開発目的ならブラウザのセキュリティを一時的に無効にすることでCORSを無視することが出来ます。（Chromeの場合は以下の方法）
Winキー＋Rから、以下を起動
"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security --user-data-dir="C://Chrome dev session
参考

Comments

[Yama-guchi]

とても分かりやすい回答ありがとうございました。
２でとりあえずAPIを使用できるようになりました。
１についても理屈は分かりました。どうやってAPIを踏み台(サーバーサイド）にとりこめばいいかについては勉強をいたします。

[Yama-guchi]

１についてはpythonでとりあえずAPIのJSONデータを取り込むことができました。これをJavascriptで読み込みばいいのですね。
```
import requests
import json

url = 'https://www.metaweather.com/api/location/44418/'

res = requests.get(url)
data = json.loads(res.text)

print(data)
```

[tanat]

> １についてはpythonでとりあえずAPIのJSONデータを取り込むことができました。これをJavascriptで読み込みばいいのですね。

そうですね。

あとはJavascriptからのリクエストをAPIへのリクエストに反映すればとりあえずは動くと思います。

Answer 2

CORS の処理するのはクライアントなので、無視したければ無視するための起動オプションをブラウザに与えれば良いです。

*学習用に人様のリソースを使用するのはあまり良いことではないです。特にアクセス頻度を気にしている個人サーバ（？）はやめましょう。キチンと仕組みを理解してから API を叩くようにしてください。

Comments

[Yama-guchi]

＞CROS の処理するのはクライアントなので、無視したければ無視するための起動オプションをブラウザに与えれば良いです。
ありがとうございます。解決できました。

＞*学習用に人様のリソースを使用するのはあまり良いことではないです。特にアクセス頻度を気にしている個人サーバ（？）はやめましょう。
特にアクセス頻度を気にしている個人サーバというのはどうやって判断すればよいのでしょうか？

[退会済みユーザー]

> 特にアクセス頻度を気にしている個人サーバというのはどうやって判断すればよいのでしょうか？

書き方が悪かったです。
アクセス制限の記述がない API は無理なアクセスができてしまう可能性があるので、初学者は使用しないほうが良いです。

まずは API を使用しない状態で、正しく処理ができるようになってください。その後、リソースへの制限が明記してある API を使用して、API 接続を学ぶのが良いです。

Answer 3

サーバー側の対応が必要なのでどうしようもない。
JSからの使用を考慮してない古いAPIならJSONPだけ対応してることもあるけどそれもなさそうなので
単にCORSのことを知らないだけかも。
https://www.metaweather.com/api/

ブラウザのJS以外で取得するしかないのでは。

Comments

[Yama-guchi]

```
import requests
import json

url = 'https://www.metaweather.com/api/location/44418/'

res = requests.get(url)
data = json.loads(res.text)

print(data)
```
pythonでとりこめたので、これをjavascriptで読み込みたいと思います。

Answer 4

WindowsならXAMPPとかでローカルでWebサーバー立ち上げてそこで実行してみては？

Comments

[Yama-guchi]

ありがとうございます。
XAMPP勉強してみます。