Home>

Acquire information using AXIOS from API data of Japanese coronavirus-infected persons, published in open source, and want to display on browser as follows, and use Vue.js. I made a code.

I want to realize
PREFECTURE: Hokkaido CASEOFINFECTION: OO People CASEOFINDEATH: OO People
· · · · Hereinafter, other prefectures continue

However, an error message as follows appears on the console and can not be displayed well. Could you tell me someone?


Error message

SEC7120: [CORS] Source 'http://127.0.0.1: 5501', 'https://covid19-wwn-web-api.now.sh/api/v1/prefectures' CROSS-ORIGIN resource Access-Control-Allow-Origin Response Header 'http://127.0.0.1: 5501' was not found.

Source 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 Infectations" >
Prefecture: {{INFECTION.NAME_EN}} 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 >

Does the same error happens even if you change the request URL to https://covid19-japan-web-api.now.sh/api/v1/preFectures?

harry00002021-04-07 02:17:40

Thank you Cubick! Not completed!

user405242021-04-07 02:17:40