axios简介和配置

axios是对于ajax请求的封装，他也在内部自己封装了promise对象。axios可用于浏览器和node，在浏览器封装xhr，在node中封装的是http模块

​ 在axios，默认只有 >= 200 和 <400 的状态码都认为成功

​ 在axios请求不会发送请求参数的值为null，undefined的请求参数

axios的配置

首先安装axios并新建个文件用于axios的配置
npm i axios

import axios from 'axios'

// axios.create等于复制了一份新axios的实例，并返回
const requesr = axios.create({
	base: '里面用于你请求接口的基本地址'
})
// 统一设置请求头
request.defaults.headers['sessionToken'] = '111';

// axios的请求拦截器
// axios 请求拦截器
request.interceptors.request.use(function (config) {
  // 在请求拦截器函数中的 config 是本次请求相关的配置对象
  // config 就是最后要发给后端的那个配置对象
  // 我们可以在拦截器中对 config 进行统一配置定制
  console.log('请求拦截器', config)

  // return config 是通行的规则
  return config
}, function (error) {
  // Do something with request error
  // 如果请求错误，则返回错误的原因
  return Promise.reject(error)
})

// axios的响应拦截
// 返回拦截
request.interceptors.response.use(
  response => {
	  // 允许响应的结果返回  
      return response.data;
    
  },
  error => {
    return Promise.reject(error);
  }
)

// 自定义处理后端返回数据的方法
// axios提供的用来自定义处理后端返回数据
request.defaults.transformResponse = [function(data) {
	// data就是后端返回的数据
}]

export default request

附一张图来助于说明拦截器的作用

axios的跨域访问

1. 后端设置允许跨域访问

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 

​ 2. 在访问其他服务端接口时，你只能在前端来解决CORS跨域问题时，在[e-mail]中在根目录下创建vue.config.js中来手动配置代理。

module.exports = {
    lintOnSave: false,
	devServer: {  
  		proxy: {
    		// 设置手动代理，解决vue本地访问外部接口的CORS跨域问题
    		'/api': {
      		target: 'http://v.juhe.cn/toutiao/',  // 请求的接口地址
      		ws: true,
      		changeOrigin: true,  // 是否跨域
      		pathRewrite: {
              '^/api': '/'  // api代替url里的端口或者基本地址
      		}
    		}
  		}
	}
}