搞Google地图的时候, 本地是可以显示的, 但是到了服务器上地图一直显示不出来, 火狐打开F12,发现是找不到json的文件,
本来还以为是IIS中"请求筛选"的问题,后来发现不是...
解决办法..:..:.:.....:. 去IIS中的"MIME类型",加入文件扩展名为".json",MIME类型为"text/plain",("text/json"更合适?) 再"确定"即可...
vue请求服务器上的json数据跨域问题
问题:
本地直接使用axios请求会报跨域错误
解决方法:
在config文件下找到index.js,vue-cli3没有config文件的需要自己在根目录创建vue.config.js文件。
proxyTable: {
'/json': {
target:"http://xx", //你请求的地址
changeOrigin: true,
pathRewrite: {
'^/json': 'http://xx' //替换target中的地址,项目中请求http://xx就直接写成/json就可以了
}
},
},
},
修改完配置后,需要重新 npm run dev
配置完后本地请求就不会报跨域了
再在发起请求的地方加上一个判断就可以兼顾线上的请求问题
解决方法:
let mapDataUrl = ''
if(process.env.NODE_ENV === 'development'){//判断是否是开发环境
mapDataUrl = '/json'+'xx'+'.json'//开发网址用刚才的配置好的/json
}else{
mapDataUrl = 'http://xx'+'xx'+'.json'//生产环境的网址直接写
}
this.$axios({
url:mapDataUrl,
})
搞Google地图的时候, 本地是可以显示的, 但是到了服务器上地图一直显示不出来, 火狐打开F12,发现是找不到json的文件,
本来还以为是IIS中"请求筛选"的问题,后来发现不是...
解决办法..:..:.:.....:. 去IIS中的"MIME类型",加入文件扩展名为".json",MIME类型为"text/plain",("text/json"更合适?) 再"确定"即可...
转载于:https://www.cnblogs.com/love-zf/p/5881766.html
在前端开发过程中,当后台服务器开发数据还没完善,无法与我们交接时,我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。
vuecli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static
文件夹下创建json
文件,vuecli3、4没有static
文件夹了,那咋办?有人说我创一个static
文件夹在下面继续写json
文件不就行了。但结果会报错,请求404找不到文件。
1. @vue/cli已经默认将静态文件改存在public文件夹下了。
static
文件夹在配置中已经识别不出了。我们在public
文件夹下编写json
文件作为模拟数据:
2. 项目安装axios,导入axios,创建get()异步请求:
这里可能会有朋友疑问了,诶?请求路径不应该是'public/data/xx.json'
吗?注意了如果路径这样写反而会报错404找不到。3. 转发api路径代理设置。
开发情况下我们像上面这样改写路径其实是不合理的,默认我们将相对路径写为'/api/xxx'
,那如何将/api
指向实际的数据文件路径,实现转发?旧版本下我们会在vue.config.js
下配置proxy
属性,但新版本这个js文件已经不在目录下了,我们需要手动创建。//在根目录下创建vue.config.js,如下配置: module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', //路径指向本地主机地址及端口号 ws: true, changeOrigin: true, pathRewrite:{ '^/api': '/data' //路径转发代理 } } } } }
4. 将axios请求路径更改为/api。
做完以上步骤和避开雷区,已经可以成功在vuecli3、4版本项目上请求到本地json文件的数据了。等到和后台对接时,只要和后台工作人员确认好数据所在的主机地址端口号和存放路径,更改vue.config.js
文件配置即可。
在前端开发过程中,当后台服务器开发数据还没完善,无法与前端进行交接时,我们习惯在本地写上一个json文件作模拟数据测试代码效果是否有问题。
vue-cli3.0往后的项目基础架构对比旧版本有些区别。以前大家都习惯在根目录下的static文件夹下创建json文件,然而vuecli3、4没有static文件夹了。若创建一个static文件夹在下面存放json文件,在实际调用过程中会报错,提示请求404。因此本文将提供两种方法调用本地的json文件。1. 利用Axios请求调用本地json文件
Vue cli3削减掉static文件夹,取而代之的是在项目根目录下(与src同级)生成public文件夹,用于存放静态资源,如下图所示,可以将本地json文件放到public文件夹下。
利用axios的get请求方式,可以调用上述json文件。axios.get('/confidence-band.json').then(res => { console.log(res.data) })
需注意,axios是异步的,如果转成同步进行,需要在外函数添加async,axios前加await。
2. import直接调用(推荐)
上述方式本地json文件必须存放指定位置,同时还要考虑同步异步的问题。利用import引用,本地json文件无需存放指定位置,以存放assets文件夹下的json文件夹为例。
引用及调用:import confidence_band_json from '@/assets/json/confidence-band.json' // 引用 let data = confidence_band_json // 调用
两种方式各自有使用场景,若无要求,建议使用第二种方式,调用更为简单。