Mint UI跨域问题

自己写了一个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

---

原文作者：祈澈姑娘 关注「编程微刊」公众号 ，在微信后台回复「小程序」，获取小程序开发全套资料和500G编程资源教程。