vue-cli3使用axios请求后端（Python+Django）的数据和跨域proxy设置踩坑指南_unused definition $axios

注意：我是负责前端部分的，后端是同学在负责，所以我只负责一个前后端的对接。背景是一个在线商城。

前端部分

首先清楚前端是作为客户端，请求后端服务端的消息。所以前端后端都run起来。
后端的同学给了我这样的接口文档：

因此后端请求这个url就能够返回数据：

接下来是前端的问题，前端就是要向这个URL发出get的请求。
这里我使用了axios的包，首先npm install axios，然后在/src/api/index.js下对axios做配置：

import axios from 'axios';
import Qs from 'qs'; // 用来处理参数，可不使用，若要使用，npm安装： npm install qs
axios.defaults.baseURL = 'http://127.0.0.1:8000/'; // 请求的默认域名
// 添加一个请求拦截器
axios.interceptors.request.use(config => {
   
        config.headers.languagetype = 'CN'; // 举例，加上一个公共头部
        config.data = Qs.stringify(config.data); // 处理数据，可不写
        return config;
    },
    err => {
   
        return Promise.reject(err);
    });

//添加一个响应拦截器
axios.interceptors.response.use(res => {
   
    //在这里对返回的数据进行处理
    console.log(res.data, '网络正常');
    return res.data;
}, err => {
   
    console.log('网络开了小差！请重试...');
    return Promise.reject(err);
});

export default axios 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

然后在main.js的地方全局引入，注意这里的axios是灰色的，因为Unused definition $axios，但是无所谓：

Vue.prototype.$axios = Axios;