

オープンソースで公開されている、日本のコロナウイルス感染者数のAPIデータからaxiosを使用して情報を取得し、下記のようにブラウザ上に表示したいと思い、Vue.jsを使用してコードを作成しました。

**実現したいこと**  
Prefecture: 北海道 CaseOfInfection: OO人 CaseOfInDeath: OO人  
・・・・・以下、他の都道府県も続く形

しかし、コンソール上に下記のようなエラーメッセージが出現し、うまく表示することができません。どなたかご教示いただけませんでしょうか？

* * *

**エラーメッセージ**

[code]

    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' が見つかりませんでした。
    
[/code]

**ソースコード**

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>learning axios by using vue.js</title>
    </head>
    <body>
        <div id="app">
            <ul>
                <li v-for="infection in infections">Prefecture：{{ infection.name_ja }}CaseOfInfection:{{ infection.cases }}CaseOfDeath:{{ infection.death}}</li>
            </ul>
        </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
    new Vue({
        el:'#app',
        data:{
            infections:[],
        },
        mounted :function(){
            axios.get('https://covid19-japan-web-api.now.sh/api//v1/prefectures')
                .then(response => this.infections = response.data)
                .catch(response => console.log(response))
        }
    })
    </script>
    </body>
    </html>
    
[/code]


CC BY-SA 4.0
2020-06-07T03:59:04.390
67383
2021-04-04T00:52:01.447
2021-04-04T00:52:01.447
32986
40524
question
vue.js axios
axiosとvue.jsを使用してWeb APIから結果を取得しようとすると 'SEC7120: [CORS]' エラーが表示される