http請求后台接口配置

http.js

import axios from 'axios';
import Qs from "qs"
import store from '@/store/store'
import router from '@/router/index'

// 設置請求超時時間  https://www.kancloud.cn/yunye/axios/234845 axios配置
axios.defaults.timeout = 1000;
// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
axios.defaults.baseURL ='';


// 在請求或響應被 then 或 catch 處理前攔截它們。
// http request 攔截器 在headers上添加token
// 添加請求攔截器
axios.interceptors.request.use(
    config => {
      // 在發送請求之前做些什么
        if (store.state.token.token) {
          let token = store.state.token.token
          // 在 XRH 的Request Headers 中查看
          // 判斷是否存在token，如果存在的話，則每個http header都加上token
          // config.headers.Authorization = `token ${store.state.token}`;

          // 但是我要的是不是Authorization，而是自定義的 X-Auth-Token
          // config.headers['toekn'] = '840e8e68de044986ba1d5565063f205c'
          config.headers['X-Auth-Token'] = `token ${token}`;
        }
        return config;
    },
    err => {
      // 對請求錯誤做些什么
        return Promise.reject(err);
    });

// http response 攔截器  token 已過期，重定向到登錄頁面 
// 添加響應攔截器 
axios.interceptors.response.use(
    response => {
      // 對響應數據做點什么
        return response;
    },
    error => {
      // 對響應錯誤做點什么
      if (error.response) {
        // console.log('后台返回的全部數據結構',error.response)
        // console.log('error.response',error.response.data == 'error@nologin')
        // 首頁中出現access_token已經過期時不直接跳轉到登錄頁
        // return
        switch (error.response.status) {
          case 401:
            // 401 清除token信息並跳轉到登錄頁面
            store.commit('logout');
            router.replace({
                path: '/login',
                query: {redirect: router.currentRoute.fullPath}
            })
        }
        // console.log('router',router)
        console.log('router.currentRoute',router.currentRoute)
      }
      // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
      return Promise.reject(error.response.data) // 返回接口返回的錯誤信息
    });


/**
 * 封裝get方法
 */
export function get(url,param={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{params:param}).then(response => {
      resolve(response.data);
    }).catch(err => {
      reject(err)
    })
  })
}
/**
 * 封裝post請求
 */

// http://www.onlyued.com/archives/344
// vue-resource中使用了Vue.http.options.emulateJSON = true; 以application/x-www-form-urlencoded的請求頭部發送參數
/* axios 使用 headers: {
 'Content-Type': 'application/x-www-form-urlencoded',//請求頭部
},
*/
//  這里可以在發送請求之前對請求數據做處理，比如form-data格式化等，
// 這里可以使用開頭引入的Qs（這個模塊在安裝axios的時候就已經安裝了，不需要另外安裝）
 export function post(url,data = {}){
     return new Promise((resolve,reject) => {
         axios.post(url, data,{
             headers:{
                //  小程序中需要全部小寫
                // 'content-type': 'application/json'
                'content-type': 'application/json;charset=UTF-8'
                // 'Content-Type': 'application/x-www-form-urlencoded'  data數據處理 -- Qs.stringify(data) //以表單形式提交
            }
        }).then(response => {
            resolve(response.data);
        },err => {
            reject(err)
        })
   })
 }

api.js

import {post,get} from './http'

let SERVER_FLAG = 'problem-manage';//通用標識

//服務器環境標識 1:測試；2:生產。
let signSystem = 1;

let host = 'http://' //測試環境

if(signSystem === 2){
    host = 'http://';//生產環境
}

if (process.env.NODE_ENV === 'development') {
  // dev 環境
  host = '/api';
}

// 請求接口
export function indexReport(data = {}){
    return post(`${host}/${SERVER_FLAG}/indexReport`,data)
}

config目錄下的index.js里配置

proxyTable: {
      '/api': {
        target: 'http://10.98:8080', // 代理請求后台地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

build里的assetsPublicPath前面加一個點

assetsPublicPath: './',