手牵手学习vue之如何封装请求及处理跨域

• 什么是跨域

正常情况下，我们使用ajax请求的数据都在自己的服务器上。但在一些特定的场景中，我们需要获取到别人的服务器上的数据，也就是在自己的服务器中的ajax要请求到别人的服务器的网址，这就是跨域。跨域是浏览器为了安全而做出的策略：同源策略

• 什么是同源策略

即同端口，同域名，同协议

• 如何处理跨域

简述：vue-cli3.0发布后，项目配置文件做出了重大革新，之前老的版本，项目配置项是在webpack中进行的，3.0后，官方给出了一个可选的配置文件vue.config.js，因此我们在处理前端跨域的时候也需要在这个文件中进行，在这不过多阐述。详细参考官方：Vue CLI

module.exports = {
    devServer: {
        proxy: {
            '/admin': {
                target: "http://huangshan.jsxhfh.com/admin",
                changeOrigin: true,
                pathRewrite: {
                    "^/admin": ""
                }
            }
        }
    },
}

其实如果一切顺利，我们的跨域已经处理好~

• 根目录中新建.env.development文件

VUE_APP_BASE_API = '/admin'

• 封装请求

import axios from 'axios'
import { Notification, MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

// 创建axios实例
const service = axios.create({
    // axios中请求配置有baseURL选项，表示请求URL公共部分
    baseURL: process.env.VUE_APP_BASE_API,
    // 超时
    timeout: 10000
})
// request拦截器
service.interceptors.request.use(
    config => {
        if (getToken()) {
            config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
        }
        return config
    },
    error => {
        console.log(error)
        Promise.reject(error)
    }
)

// 响应拦截器
service.interceptors.response.use(res => {
    const code = res.data.code
    if (code === 401) {
        MessageBox.confirm(
            '登录状态已过期，您可以继续留在该页面，或者重新登录',
            '系统提示',
            {
                confirmButtonText: '重新登录',
                cancelButtonText: '取消',
                type: 'warning'
            }
        ).then(() => {
            store.dispatch('LogOut').then(() => {
                location.reload() // 为了重新实例化vue-router对象 避免bug
            })
        })
    } else if (code !== 200) {
        Notification.error({
            title: res.data.msg
        })
        return Promise.reject('error')
    } else {
        return res.data
    }
},
    error => {
        console.log('err' + error)
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service

• 根据功能模块创建请求

import service from "../../src/utils/request";
 
/**
 * 登录接口
 */
 
export function Login(data) {
  return service.request({
    url: "/login/",
    method: "POST",
    data,
  });

• 组件调用

import { Login } from "../../api/account";
onFinish = (values) => {
    Login(values)
      .then((res) => {
        message.success("登录成功");
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
    console.log("Received values of form: ", values);
  };