VSCode使用axios访问本地文件跨域报错

最新推荐文章于 2024-10-02 12:09:21 发布

可乐丿不加冰

最新推荐文章于 2024-10-02 12:09:21 发布

阅读量1k

点赞数 2

文章标签： vscode vue.js javascript

本文链接：https://blog.youkuaiyun.com/weixin_44740485/article/details/125263335

版权

报错：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}
        ]
    }
}