Vue.js vuex spa apiを叩いたがAccess-Control-Allow-OriginでCORSブロックされる

Question

天気のapiを叩いたらCORSでブロックされました。
headerをつければいいという記事を見つけて試してみましたがダメでした。
現在localhostで実行しております。
ちなみにAPIを叩いている場所はstoreのモジュール内です。
どこが間違っているのでしょうか？

    const url = 'http://weather.livedoor.com/forecast/webservice/json/v1?city=400040'
    axios.get(url, 
{'Access-Control-Allow-Origin': 'http://localhost:8080', 'content-type': 'application/json'})
      .then(function (response) {
        console.log(response)
      })
      .catch(function (error) {
        console.log(error)
      })

Access to XMLHttpRequest at 'http://weather.livedoor.com/forecast/webservice/json/v1?city=400040' 
from origin 'http://localhost:8080' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js?ec6c:178 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://weather.livedoor.com/forecast/webservice/json/v1?city=400040 with 
MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 
for more details.

Answer 1

headerをつければいいという記事を見つけて試してみましたがダメでした。（中略）どこが間違っているのでしょうか？

「headerをつければいい」のは、サーバ側での話です。JavaScriptの側でCORSヘッダを付けても意味はありません。

そして、「CORS非対応」「JSONPも使えない」となれば、通常の方法ではブラウザ内JavaScriptからこのAPIは呼び出せません。

Comments

[_Victorique__]

回答ありがとうございます。
なるほど見当違いなことしてますね。ではこのAPIが特別ってことで合っていますか？

[maisumakun]

おそらく、CORSが出始めるより以前からあるAPIで、そのまま放置されているものと思われます。いまどきHTTP限定のAPIなど、使える場面も限られます。