报错:Access to XMLHttpRequest at ‘file:///D:/test/test01/html/axios/data.json’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="1">
<tr>
<td>姓名</tb>
<td>年龄</td>
</tr>
<tr v-for="item in memberList">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script src="../../utils/vue.js"></script>
<script src="../../utils/axios.js"></script>
<script>
new Vue({
el: '#app',
data: {
//定义一个空数组,一会儿接收返回数据
memberList: []
},
created() {
this.getList()
},
methods: {
//获取list数据的get方法
getList(id) {
//axios.get('http://localhost:8081/admin/ucenter/member')
//异步get请求,获取data.json文件中的数据
axios.get('data.json')
.then(response => {
console.log(response)
this.memberList = response.data.data.items
})
.catch(error => {
console.log(error)
})
}
}
})
</script>
</body>
</html>
json数据
{
"success": true,
"code": 20000,
"message": "成功",
"data": {
"items":[
{"name": "刘德华","age": 15},
{"name": "周润发","age": 20},
{"name": "张学友","age": 25}
]
}
}
直接访问报错,跨域
解决办法:
下载Live Server
使用Live Server
完美解决