TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

Axios使用

zyz
2021-04-06
/
0 评论
/
37 阅读
/
正在检测是否收录...
04/06

一、Axios说明

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,Axios中文文档

Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource。目前主流的 Vue 项目,都选择 axios  来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据。

二、安装

npm install axios

三、项目中的使用

关于axios插件的引入在main.js中引入,但是 axios 并不能Vue.use,只能每个需要发送请求的组件中即时引入。为了解决这个问题,是在引入 axios 之后,修改原型链。

  • 配置

    # main.js
    
    # 导入Axios插件
    import Axios from 'axios'
    
    # 如果在其它的组件中,是无法使用 axios 命令的。但如果将 axios 改写为 Vue 的原型属性,在其他组件中就可以使用
    Vue.prototype.$ajax = Axios;
  • 使用

    # 例如HomeView.vue组件中
    export default{
        ...
        created() {    // 钩子函数 mounted: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
            // 发起get请求
            this.$ajax.get('http://www.api.qsyj.com/json/banner.json')
                .then(function(response) { // 获取数据成功
                    // 服务器返回的数据是在 response.data 中
                    console.log(response.data)
                })
                .catch(function(err) { // 出错
                    console.log(err)
                })
        }
    }

四、跨域请求

所谓的跨域请求就是指:当前发起请求的域与该请求指向的资源所在的域不一样。这里的域指的是这样的一个概念:我们认为若协议 + 域名 + 端口号均相同,那么就是同域。

例如域名 www.zhangsan.com 获取到首页内容。
而请求资源为 www.lisi.com/json/banner.json时,这就会存在跨域。
因为域不一致,与此同时由于安全问题,这种请求会受到同源策略限制。

五、跨域请求的安全问题

浏览器会对上面提到的跨域请求作出限制。浏览器之所以要对跨域请求作出限制,是出于安全方面的考虑,因为跨域请求有可能被不法分子利用来发动CSRF攻击。
CSRF(Cross-site request forgery),中文名称:跨站请求伪造。

例如,A网站是真实受信任的网站,B网站是高危的网站。
用户登陆了受信任的A网站【本地会存储A网站相关的Cookie,并且浏览器也维护这一个Session会话】。

危险网站B,此时用上面存储的用户信息,模拟向A网站发起请求,并对A网站进行操作(跨域请求)。

而在A网站的角度来看是并不知道请求是由B网站发出来的(Session和Cookie均为A网站的),这时便成功发动一次CSRF 攻击。

【攻击者盗用了你的身份,以你的名义发送而已请求。】

五、解决跨域请求问题

  • JSONP
    JSONP 本质上是利用 <script> 等标签不受同源策略限制,可以从不同域加载并执行资源的特性,来实现数据跨域传输。【备注: 在javascript课程中讲解到关于JSONP的具体使用】
  • 服务器配置(不做讲解)
    在服务器中添加Access-Control-Allow-Origin: *服务器可以指定该字段的值为通配符,表示允许来自所有域的请求。

六、Axios中解决跨域请求

  • 代理的理解
    例如在大陆中想要访问谷歌浏览器,直接访问是访问不了的,因为这里有个墙。但在香港是可以直接访问谷歌浏览器的。此时,就可以找香港作为代理。在大陆中我想要搜索Vue.js,那么通过香港来发起请求,在香港中获取到数据再返回到大陆。

  • proxy代理配置
    假设现在直接访问http://t.weather.sojson.com/api/weather/city/101030100中天气数据,这是会涉及到跨域请求问题。此时就可以添加proxy代理配置。

    # 项目的根目录下创建 vue.config.js ,文件中添加以下内容
    # 需要跨域请求的域名是: http://t.weather.sojson.com
    # 请求资源是: /api/weather/city/101030100
    # 在proxy中配置对应的域名即可: http://t.weather.sojson.com
    
    module.exports = {
        devServer:
            proxy:'http://t.weather.sojson.com'
        }
    }
    # 发起请求时,就不需要些成 `this.$ajax.get('http://t.weather.sojson.com/api/weather/city/101030100')`

    export default{
        created() {
            this.$ajax.get('/api/weather/city/101030100')
                .then(function(response) {
                    console.log(response.data)
                })
                .catch(function(err) { 
                    console.log(err)
                })
        }
    }
赞(0)
评论 (0)