axios

  1. 什么是axios
    易用、简洁且高效的http库
  2. 为什么使用axios
    因为vue-resource在vue2之后就不在维护了,vue官方推荐我们使用axios。
  3. 如何使用vue-axios框架
    官网
  • 安装 npm i --save axios vue-axios
  • 引入vue-axios
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, axios)
跨域调用
  1. 什么是跨域调用?
    跨域是指从一个域名的网页去请求另一个域名的资源。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域。
  2. 为什么会存在跨域调用
    如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。
  3. 跨域调用的形式是什么样的
    会先发送一次嗅探请求,如果服务器允许访问了,才会发送真实的请求
  4. 怎么解决跨域问题
  • 配置代理
    官方文档
    在webpack.config.js中配置devServer属性
devServer: {
    proxy: {
        '/api': {
            target: 'http://39.97.33.178',
            changeOrgin: true
        }
    }
},

当我们后台接口格式不统一的时候,我们可以手动增加一个前缀,在真正请求的时候,通过pathRewrite属性,把这个前缀去掉。

devServer: {
    proxy: {
        '/myApi': {
                target: 'http://39.97.33.178',
                changeOrgin: true,
                pathRewrite: {'^/myApi' : ''}
         }
    }
},
  • 服务端支持跨域调用
    怎么样才算服务器允许访问呢?服务器的相应头中包含
    Access-Control-Allow-Origin : *
    Access-Control-Allow-Credentials: “true” // 允许客户端携带验证信息
    Access-Control-Allow-Methods: “GET, HEAD, POST, PUT, DELETE, TRACE, OPTIONS, PATCH”
    Access-Control-Allow-Headers: “Origin, X-Requested-With, Content-Type,Token,Accept, Connection, User-Agent, Cookie”
    Access-Control-Max-Age: “3628800”
  • 通过jsonp解决
    js脚本
封装http模块

app.js,方便进行统一的维护,可以添加一些拦截器

import axios from 'axios'

const instance = axios.create({
    timeout: 1000,
    headers: {
        "Miaomiao-Token": 'token'
    }
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 对响应数据做点什
    // 错误处理
    const data = response.data;
    //不同系统修改内容不同 自行更改  看接口文档
    if (data.status !== 0) {
        alert(data.msg);
    }
    // 精简了返回内容
    return data;
}, function (error) {
    // 对响应错误做点什么
    // 对错误信息进行提示
    return Promise.reject(error);
});

function get(url, config) {
    return instance.get(url, config);
}

function post(url, body, config) {
    return instance.post(url, body, config);
}

export default {
    get,
    post
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值