专栏首页编程微刊Vue移动端框架Mint UI教程-接口跨域问题(七)

Vue移动端框架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接口写在请求里

图片.png

解决办法:设置代理,利用proxyTable属性实现跨域请求

1:打开build/webpack.dev.conf.js,配置代理proxyTable属性如下:通过vue-cli提供给的代理(proxy)进行配置即可,

proxyTable: {
  '/api': {
    target: 'http://www.intmote.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''  
    }
  }
},

图片.png

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


原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • web开发快速提高工作效率的一些资源

    前端学习资源实在是又多又广,在这样的一个知识的海洋里,我们像一块海绵一样吸收,想要快速提高效率,平时的总结不可缺少,以下总结了一些,排版自我感觉良好,推送出来,...

    王小婷
  • 2018年国内就业薪资高的7大编程语言排行1. Java2.Python3.C语言4.SQL5. JavaScript6.PHP7:C++

    王小婷
  • 那些我不得不收藏的技术网站学习网站博客托管平台社区国外编程学习网站: 资源

    王小婷
  • Chrome浏览器最牛插件之一 Vimium

    常用使用:http://www.jianshu.com/p/2ac3c064ba9c

    onety码生
  • PS,AI,Sketch工具教程集结

    这里是一些有关工具的教程,还有几篇自学前的梳理,大多从优设网挑出来,自己也跟着练过一部分。

    宇相
  • Python爬虫入门教程 2-100 妹子图网站爬取

    从今天开始就要撸起袖子,直接写Python爬虫了,学习语言最好的办法就是有目的的进行,所以,接下来我将用10+篇的博客,写爬图片这一件事情。希望可以做好。

    梦想橡皮擦
  • hadoop开发环境安装

    1.Windows环境VMWare WorkStation 12安装步骤 http://www.jianshu.com/p/6b589ecd62c2 2.VMW...

    Albert陈凯
  • 深度学习(Deep Learning) 学习资料

    用户1756920
  • 软件安全性测试(连载2)

    机密性要求保护数据内容不能泄露,加密是实现机密性要求的常见手段。加密技术的过程如下。

    小老鼠
  • Java研发方向如何准备BAT技术面试答案(下)

    这部分内容比较深入,整理了一些网络文章可参考,推荐看书籍的方式去复习。 81.深度优先和广度优先算法 推荐看书籍复习!网络文章只做参考,http://blog....

    JavaQ

扫码关注云+社区

领取腾讯云代金券