前端访问本地json小结

最新推荐文章于 2024-05-15 09:55:43 发布

阿兴要努力

最新推荐文章于 2024-05-15 09:55:43 发布

阅读量2.5k

点赞数 1

分类专栏： js vue

本文链接：https://blog.csdn.net/qq_35601056/article/details/89382836

版权

本文总结了前端访问本地JSON文件时遇到的跨域问题，探讨了浏览器的同源策略，并提出了两种解决方案：将JSON文件放在同一服务器下并通过接口请求，或者使用JSONP（仅支持GET方式）。作者分享了在Vue项目中加载JSON数据的方法，指出文件应放在static文件夹下，并提醒注意目录结构。

摘要由CSDN通过智能技术生成

在前端我们通过jquery 获取数据我们最先想到的是

$.ajax({
         type: 'get',
           url: './jsondata.json',
           async: false,
           dataType: 'json',
           success: function(data){
               debugger;
           },
           error: function(XMLHttpRequest, textStatus, errorThrown) {
               debugger;
           }
       })

but 在浏览器上运行会报错：
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

报错信息：浏览器不支持跨域
通俗的讲，浏览器有一个很重要的安全机制，即为同源策略：不用域的客户端脚本在无明确授权的情况下不能读取对方资源，跨域也就是不同源。

那我们就要问了，那咋办
两种解决思路：1.将你的json 文件放到跟js文件相同服务器下，通过请求接口的形式解决（这个不详细说明）

2.通过jsonp 形式解决（只支持Get方式） ==》借鉴前辈们的做法
json.html

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">

最低0.47元/天解锁文章

阿兴要努力

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端访问本地json小结

在前端我们通过jquery 获取数据我们最先想到的是$.ajax({ type: 'get', url: './jsondata.json', async: false, dataType: 'json', success: function(data){ de...
复制链接

扫一扫