Access to XMLHttpRequest at

最新推荐文章于 2024-04-06 11:08:15 发布

无量寂空

最新推荐文章于 2024-04-06 11:08:15 发布

阅读量3.9k

点赞数

分类专栏：我的BUG 文章标签： vscode vue

本文链接：https://blog.csdn.net/fuyuanduan/article/details/120259189

版权

我的BUG 专栏收录该内容

29 篇文章 1 订阅

订阅专栏

Axios 访问本地文件出现错误（跨域问题）

本地文件：

{
    "name": "秦始皇",
    "url": "https://www.baidu.com",
    "page": 1,
    "isNonProfit": true,
    "address": {
        "street": "苏雅路",
        "city": "江苏苏州",
        "country": "中国"
    },
    "links": [
        {
            "name": "bilibili",
            "url": "https://space.bilibili.com"
        },
        {
            "name": "大江",
            "url": "https://www.baidu.com"
        },
        {
            "name": "淘宝",
            "url": "https://www.taobao.com"
        }
    ]
}

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>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">

    </div>
    <script type="text/javascript">
        var vm = new Vue({
            el: '#app',
            mounted() {   //钩子函数  ===> 可以插到中间去 ！ ！ ！
                //————链式编程
                axios.get("data.json").then(response=>( console.log(response.data) ));
            }
        });
    </script>
</body>
</html>

option + B 打开浏览器查看：
在这里插入图片描述

解决方案：

#在VSCode中下载一个插件，Live Server ，如下图所示：
在这里插入图片描述
//然后再次打开这个html文件的时候用下图所示的方式打开，即可：

成功解决：

再次打开浏览器，发现成功解决了之前的问题：
在这里插入图片描述

无量寂空

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
Access to XMLHttpRequest at

Axios 访问本地文件出现错误（跨域问题）本地文件：{ "name": "秦始皇", "url": "https://www.baidu.com", "page": 1, "isNonProfit": true, "address": { "street": "苏雅路", "city": "江苏苏州", "country": "中国" }, "links": [ {
复制链接

扫一扫