axios二次封装+代理（解决跨域）

先安装axios

npm install axios

在main.js里写

 把axios全局挂载

 

封装axios

在src文件夹下创建utils

utils下创建一个request.js文件

 在request.js中写

import axios from "axios";
// 创建axios对象
const request = axios.create({
    baseURL: "/api", //基础路径，发请求的时候，路径当中会出现api，不用你手写
    timeout: 5000 //请求时间超过5秒
});
// 添加请求拦截器,   在请求发送之前做一些操作
request.interceptors.request.use(
    request => {
        // 设置请求的头信息
        request.headers = {
            token: ``, // 请求添加的token（此处也可不写）
        }
        return request
    },
    error => {
        Promise.reject(error)
    }
)

// 添加响应拦截器   
request.interceptors.response.use(
    response => {
        //成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情。
        return response.data
    },
    error => {
        Promise.reject(error)
    }
)
// 把request暴露出去
export default request

封装了axios还不够还要封装api

在src文件夹下创建api文件夹，在其下面创建你相关业务的文件

 把你之前封装的axios引入

import request from '@/utils/request' //引入刚刚写好的request文件
// 留言列表
export function fetchList(params) {
    return request({
        url: 'XXXX/XXXX', //接口路径
        method: 'get', //请求方式
        params: params //需要传的参数
    })
}

 然后引入到你具体的业务中

import { fetchList, login } from "../api/brand";   //引入之前的封装好的方法

 created() {    //我这里用的钩子 页面一开始就调用这个方法
    this.test();
  },
  methods: {
    test() {
 //这个是你封装api的方法名    不用写ip和具体访问的路径   直接写参数  如果没有参数就不写
      fetchList({ parameter: 1, state: 1 })
        .then((response) => {
          console.log(response)
        })
        .catch(() => {
          
        });

代理(反向代理)

什么是跨域：协议，域名，端口号不同请求，称之为跨域
例：http://localhost:8000/#/home —前端项目的本地服务器
http://39.98.123.211 —调取数据的后台服务器
直接调取后台服务器数据的话，会出现404

在vue.config.js中写

 

 devServer: {
    // port:8081, 如果出现404 可能你的8080端口被占用了，
                  // port换端口
    proxy: {
      '/api': {
        target: 'http://路径',
        chageOrigin: true,
        pathRewrite: { '^/api': '' },//路径改写
      },
    }
  }