自己写了一个json数据,放在服务器上,现在要通过vue项目调用数据
http://www.intmote.com/test.json
我现在要调用
在调用接口数据的时候的时候
会出现这样的报错
Access to XMLHttpRequest at 'http://www.intmote.com/test.json' from origin
'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
这个时候,是遇到了跨域的问题; 由于接口跨域问题,因此不能直接通过ajax请求访问
查看自己的代码,直接把json接口写在请求里
解决办法:设置代理,利用proxyTable属性实现跨域请求
1:打开build/webpack.dev.conf.js,配置代理proxyTable属性如下:通过vue-cli提供给的代理(proxy)进行配置即可,
proxyTable: {
'/api': {
target: 'http://www.intmote.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
2:回到当前页面,我的页面是my.vue,修改请求路径
created() {
this.$http.get('/api/test.json').then((response) => {
console.log(response.data)
//响应正确回调
this.nameList = response.body; //把数据存放到data中
})
},
3:重新启动项目
4:这个时候可以看到,跨域问题解决
json里面的数据也显示在了页面里面
github访问链接:https://github.com/wangxiaoting666/mint-demo
Mint UI教程汇总:
Vue移动端框架Mint UI教程-搭建环境引入框架(一)
https://www.jianshu.com/p/874e5152b3c5
Vue移动端框架Mint UI教程-底部导航栏(二)
https://www.jianshu.com/p/56e887cbb660
Vue移动端框架Mint UI教程-组件的使用(三)
https://www.jianshu.com/p/5ec1e2d2f652
Vue移动端框架Mint UI教程-跳转新页面(四)
https://www.jianshu.com/p/364d0462ddb6
Vue移动端框架Mint UI教程-调用模拟json数据(五)
https://www.jianshu.com/p/6d3f1436b327
Vue移动端框架Mint UI教程-数据渲染到页面(六)
https://www.jianshu.com/p/dc532ab82d2a
Vue移动端框架Mint UI教程-接口跨域问题(七)
https://www.jianshu.com/p/b28cd8290b2a