Q&A
エラーメッセージを調べましたか？調べてどう思った、どうしたなど伝わらないとただのデバッグ依頼案件です。
オープンソースで公開されている、日本のコロナウイルス感染者数のAPIデータからaxiosを使用して、情報を取得し、下記のようにブラウザ上に表示したいと思い、Vue.jsを使用してコードを作成しました。
【実現したいこと】
Prefecture: 北海道 CaseOfInfection: OO人 CaseOfInDeath: OO人
・・・・・以下、他の都道府県も続く形
しかし、コンソール上に下記のようなエラーメッセージが出現し、うまく表示することができません。
【以下、エラーメッセージ】
SEC7120: [CORS] 送信元 'http://127.0.0.1:5501' で、'https://covid19-japan-web-api.now.sh/api//v1/prefectures' の cross-origin リソースの Access-Control-Allow-Origin response header に 'http://127.0.0.1:5501' が見つかりませんでした。
【エラーメッセージ終わり】
どなたかご教示いただけませんでしょうか？
Vue.js
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>learning axios by using vue.js</title> 7</head> 8<body> 9 <div id="app"> 10 <ul> 11 <li v-for="infection in infections">Prefecture：{{ infection.name_ja }}CaseOfInfection:{{ infection.cases }}CaseOfDeath:{{ infection.death}}</li> 12 </ul> 13 </div> 14<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 15<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 16<script> 17new Vue({ 18 el:'#app', 19 data:{ 20 infections:[], 21 }, 22 mounted :function(){ 23 axios.get('https://covid19-japan-web-api.now.sh/api//v1/prefectures') 24 .then(response => this.infections = response.data) 25 .catch(response => console.log(response)) 26 } 27}) 28</script> 29</body> 30</html>
回答2件
0
ベストアンサー
前置き
ブラウザ(Webページ)のjavascriptからページ自身が属するドメイン（オリジンと言います）とは異なるwebページをリクエストすることはセキュリティ上禁止になっています。これを「クロスドメイン制約」と言います。
本件ではオリジンがlocalhostとcovid19-japan-web-api.now.shとで異なるのでクロスドメイン制約に引っかかります。
その対応策の一つとして「オリジン間リソース共有」(Cross-Origin Resource Sharing)という仕組みがあります。これは送信元サーバ側で「このオリジンとならデータを送ってもいいよ」という許可を与えればクロスドメイン制約に引っかからずデータを取得できる、というものです。
許可されるオリジンは、レスポンスヘッダのaccess-control-allow-originにセットされます。
javascriptからapiをリクエストするブラウザは、自身のオリジンがaccess-control-allow-originにセットされていない場合、質問文のようなエラーを返します。許可が得られてへんぞ！と。
対して、誰にでも使ってほしいapiを提供する場合は、access-control-allow-originに*をセットしてワイルドカード化したりリクエストヘッダに書かれている元のサイトと同じドメインをオウム返しするなどしてクロスドメイン制約を解決しています。
件のサイトのでは後者のオウム返し方式で実施しています。
なので、質問文のようなエラーは起こりえないはずです。
ここからが本筋
リクエストするURLが間違っている。スラッシュの数をよく見てみればわかる。
（正確には間違ったURLでもlocationで正しいURLに飛ばされるので単体で閲覧している分には間違いに気づかない。でもXHRはlocationまで気にしてくれないから。。。）
投稿2020/06/07 06:47
編集2020/06/07 06:51
総合スコア4447
hope_mucci 様
ご丁寧にご回答いただきまして、誠にありがとうございます。クロスドメイン制約というものがあるのですね。非常に分かり易くご説明いただき、大変勉強になりました。
不勉強なのが、お恥ずかしい限りです。
ご回答いただきまして本当にありがとうございました！！
0
URL間違ってないですか？(余計なスラッシュが入ってる)
ChromeのConsoleからリクエストしましたが、下のURLだとちゃんと取れました。
diff
1- https://covid19-japan-web-api.now.sh/api//v1/prefectures 2+ https://covid19-japan-web-api.now.sh/api/v1/prefectures
投稿2020/06/07 06:41
総合スコア355
markey様
ご回答誠にありがとうございます。
ＵＲＬが間違っていたのですね。問題なく実行することができました。
ＵＲＬはコピーアンドペーストしたのですが、間違っていることもあるのですね。
次回同じようなものを作る際は、よく確認致します。
あなたの回答
tips
プレビュー
