vue 数据请求

最新推荐文章于 2023-04-03 11:20:34 发布

我爱丁丁猫

最新推荐文章于 2023-04-03 11:20:34 发布

阅读量243

点赞数

分类专栏：前端文章标签： vue 数据请求

原文链接：https://www.mk2048.com/blog/blog.php?id=hac0i2c20bib&title=vue+%E6%95%B0%E6%8D%AE%E8%AF%B7%E6%B1%82

版权

前端专栏收录该内容

1898 篇文章 4 订阅

订阅专栏

                        
  作者QQ：1095737364    QQ群：123300273     欢迎加入！ 

要引入模块: vue-resource1.在package.json中的dependencies中添加vue-resource模块,然后安装(运行npm instal) 
 "dependencies": { 
 
 　　"vue": "^2.3.3", 
 
 　　"vue-router": "^2.6.0", 
 
 　　"vue-resource":"^1.2.1" 
 
 }, 
2.在router路由文件夹的index 下添加如下代码: 
 import VueResource from 'vue-resource' 
 
 Vue.use(VueResource) 
3.要使用请求的地方使用如下代码模板: 
 this.$http.get('/http://localhost:8080/graphicOneData').then(response => { 
 
 　　console.log(response); 
 
 　　var datas = JSON.parse(response.bodyText); 
 
 }, response => { 
 
 　　console.log("error"); 
 
 }); 
 
 注意: 

  1.在请求接口数据时,涉及到跨域请求出现下面错误:  

             XMLHttpRequest cannot load http://localhost:8088/test. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access. 

  解决办法: 

  在接口中设置: 
 
 response.setHeader("Access-Control-Allow-Origin", "*"); 
 
 response.setCharacterEncoding("UTF-8"); 
 
 request.setCharacterEncoding("UTF-8"); 
 
 response.setHeader("Access-Control-Allow-Origin", "*"); 
 
 response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE"); 
 
 response.setHeader("Access-Control-Max-Age", "3600"); 
 
 response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization"); 
 
 response.setHeader("Access-Control-Allow-Credentials","true"); 

更多专业前端知识，请上 
【猿2048】www.mk2048.com