目前Vue项目中对json数据的请求一般使用两个插件vue-resource和axios, 但vue-resource已经不再维护, 而axios是官方推荐的且npm下载量已经170多万,github的Star已经接近4.5万, 再看看vue-resource

但是作为学习笔记,在学习axios的同时也会对比vue-resource的用法。

先看看同域请求

 <div class="container">
<h1>vue request</h1>
<button @click="getJson">GET请求</button>
</div>
 methods: {
getJson() {
this.$http.get('/static/api/city.json', {
params: {
userId: '111'
},
headers: {
'token': 'mitu'
}
}).then((res) => {
console.log(res)
}, (err) => {
console.log(err)
})
},
}

请求结果 :

这是vue-resource的get请求方法, city.json存在于同域下的static目录, 注意,首先必须先安装 npm install -S vue-resource 然后在入口文件main.js中注册vue-resource

同理 axios的get请求如下 :

 import axios from 'axios'
methods: {
getJson() {
axios.get('/static/api/city.json').then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
}

区别在于 ,

1 .axios无需在main.js中注册,但需要在组件内部引入 import axios from 'axios'

2. vue-resource是绑定到vue实例中,所以调用时应该是 this.$http.get(), 而axios是独立的插件, 调用应该是 axios.get()

跨域请求 :

如直接把

axios.get('/static/api/city.json') 改成请求其他外部域的api如: 
axios.get('https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg')
返回结果如下 :

注意到有 No 'Access-Control-Allow-Origin' header, 表示浏览器端限制了跨域的请求。

解决的思路是,先让服务端通过跨域请求,然后客户端(浏览器)再向服务端请求数据,在此服务端起到一个代理的作用 。

1. 找到项目配置文件 config/index.js ,将proxyTable添加以下代码 :

proxyTable: {
'/api': {
target: 'https://c.y.qq.com/musichall/fcgi-bin/fcg_yqqhomepagerecommend.fcg',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},

'/api'是供客户端请求的接口 可自定义, 以上两个'/api'必须是一致的。表示客户端请求以 '/api'开头的目标都指向target

target: url  ------ 是请求的外域目标api

changeOrigin ----- ture表示开启跨域请求

pathRewrite ---- 对目标资源重定向,可为空值

  methods: {
getJson() {
axios.get('/api').then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
},
}

请求数据成功!

												




											

Vue+webpack项目中实现跨域的http请求的更多相关文章

  1. vue项目中解决跨域问题axios和

    项目如果是用脚手架搭建的(vue cli)项目配置文件里有个proxyTable proxyTable是vue-cli搭建webpack脚手架中的一个微型代理服务器,配置如下 配置和安装axios 安 ...

  2. vue项目中的跨域源请求拦截问题CORS头缺少&#39;Access-Control-Allow-Origin&#39;

    这里使用的是axios发请求出现的. 访问的api接口是: 在不同域之间访问是比较常见,在本地调试访问远程服务器....这就是有域问题. VUE解决通过proxyTable 解决办法: 1.检查请求方 ...

  3. Vue+webpack项目中,运行报错Cannot find module &#39;chalk&#39;的处理

    刚开始用vue + webpack新建项目,在github上下载了一个示例,输入npm init >>>npm run dev 后报错 Cannot find module 'cha ...

  4. vue+webpack项目中px2rem的例子

    项目环境搭建此处省略,不再赘述,需要的请查阅相关资料. 本篇只介绍,如果在vue+webpack的项目中配置,把px自动转为rem 第一步安装   npm install   postcss-px2r ...

  5. web项目中的跨域问题解决方法

    一种是JSONP 一种是 CORS. 在客户端Javascript调用服务端接口的时候,如果需要支持跨域的话,需要服务端支持. JSONP的方式就是服务端对返回的值进行回调函数包装,他的优点是支持众多 ...

  6. 前端学习笔记系列一:11@vue/cli3.x中实现跨域的问题

    由于浏览器的同源访问策略,vue开发时前端服务器通常与后端api服务器并非是相同的服务器,因此需要使用一个代理服务器实现跨域访问.在@vue/cli3.x根目录下创建一个vue.config.js文件 ...

  7. vue项目中设置跨域

    config->index.js 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/ ...

  8. vue+webpack项目中使用dev-server搭建虚拟服务器,请求json文件数据,实现前后台分离开发

    在项目开发中,前后台分离,做了假数据,项目使用vue2.0重构,后台也推到重来了,为了不耽误开发进程,我做了虚拟的数据请求,使用vue-cli脚手架搭建的项目文件中dev-server搭建虚拟api请 ...

  9. 使用Spring CROS解决项目中的跨域问题

    CROS(Cross-Origin Resource Sharing) 用于解决浏览器中跨域请求的问题.简单的Get请求可以使用JSONP来解决,而对于其它复杂的请求则需要后端应用的支持CROS.Sp ...

随机推荐

  1. java读取properties配置文件总结

    java读取properties配置文件总结 在日常项目开发和学习中,我们不免会经常用到.propeties配置文件,例如数据库c3p0连接池的配置等.而我们经常读取配置文件的方法有以下两种: (1) ...

  2. Android课程---Activity 的生命周期

    activity类处于android.app包中,继承体系如下: 1.java.lang.Object 2.android.content.Context 3.android.app.Applicat ...

  3. hdu----149850 years, 50 colors(最小覆盖点)

    50 years, 50 colors Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Othe ...

  4. 【poj1006-biorhythms】中国剩余定理

    http://poj.org/problem?id=1006 题意:中国剩余定理的裸题. 题目可转化为求最小的x满足以下条件: x%23=a;x%28=b;x%33=c; 关于中国剩余定理可看我昨天的 ...

  5. Splay Tree的删除操作

    Splay Tree的插入操作,搜索操作,和删除操作都实现了,那么就能够使用来解题了. 指针的删除操作的处理还是那么难的,非常多坎须要避开. 同一个坎还是坑了我好多次,就是指针传递的问题,什么时候须要 ...

  6. flex利用webservice上传照片

    WebService端代码 /// <summary> /// 上传文件到远程server /// </summary> /// <param name="fi ...

  7. Python之三层菜单

    三层菜单,根据用户所选数字,进入子菜单.一级一级呈现. menu = { 'Beijing': { "ChaoYang": { "CBD": ['CICC', ...

  8. lua学习:使用Lua处理游戏数据

    在之前lua学习:lua作配置文件里,我们学会了用lua作配置文件. 其实lua在游戏开发中可以作为一个强大的保存.载入游戏数据的工具. 1.载入游戏数据 比如说,现在我有一份表单: data.xls ...

  9. 为 NativeScript 项目添加 iOS / Android 平台 API 的智能感知

    使用 NativeScript ,我们可以很容易的调用平台的原生 API,在开发过程中,我们可以添加这些 API 的 d.ts 文件来提供智能感知,帮助我们更方便的构建媲美原生的 APP. 首先通过 ...

  10. Linux中jdk的安装配置

    1.下载jdk安装包 2.解压文件:tar -zxvf jdk-8u211-linux-x64.tar.gz 3.编辑环境变量:vi /etc/profile 4.在环境变量文末添加三行: expor ...