1、首先專案中安裝axios外掛

2、手動配置，在src下面建立config資料夾，下面在建立index.js(訪問域名配置)和axios.js(請求攔截以及輕輕配置等)

index.js

// 系統引數配置
let url = {
  production: 'http://localhost:8083',
  release: 'http://localhost:8081',
  test: 'http://localhost:8080',
  development: 'http://localhost:8083'
}
let baseURL
let env = process.env.NODE_ENV
switch (env) {
  case 'production':
    baseURL = url[env]
    break
  case 'release':
    baseURL = url[env]
    break
  case 'test':
    baseURL = url[env]
    break
  default:
    baseURL = url[env]
}
export default {
  url: url, // 介面地址
  baseURL: baseURL, // 基礎地址
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
    'Content-Type': 'application/x-www-form-urlencoded'
  },
  // headers: {
  //   ContentType: 'application/x-www-form-urlencoded'
  // },
  timeout: 10000, // 請求超時
  version: '1.3.0' // 應用版本
}
 

axios.js

import axios from 'axios'
import qs from 'qs'
import config from '@/config'

const {baseURL, timeout, headers} = config
axios.defaults.withCredentials = true
const ax = axios.create({
  // 是否跨站點訪問控制請求使用憑證(Cookie)
  withCredentials: true,
  baseURL: localStorage.getItem('newURL') || baseURL, // 配置介面地址
  // 修改請求的資料再發送到伺服器
  transformRequest: [
    (data, headers) => qs.stringify(data) // 序列化請求的資料
  ],
  // 請求頭資訊
  headers: headers,
  timeout: timeout // 配置請求超時
})

// 新增請求攔截器(傳送前攔截)
ax.interceptors.request.use(function (config) {
  return config
}, function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error)
})

// 新增 axios 例項響應攔截器
ax.interceptors.response.use(response => {
  return false
}, error => {
  console.log(config)
})
 

頁面訪問Logon.Vue中

表單
<Form ref="login" :model="user" :rules="ruleInline" inline>
    // 省略輸入框
    <Button type="primary" @click="handleSubmit('login')">登陸</Button>
</Form>
// 引入配置檔案
import ax from '@/config/axios'
import config from '@/config/index'

//傳送請求方式
methods: {
    handleSubmit (name) {
        this.$refs[name].validate((valid) => {
            if (valid) {
              // 配置預設介面地址
              const {baseURL} = config
              ax.post(baseURL + '/login', {
              account: this.user.account,
              password: this.user.password
            }).then((response) => {
              if (response.status === 200) {
              // 登陸成功操作
            }
            }).catch(function (error) {
                // 登陸失敗操作
                console.log(error)
              })
            } else {
              console.log('error submit!!')
              this.$Message.error('Fail!')
              return false
            }
        }
    }
}
 

3、後臺需要設定跨域訪問過濾器

package com.trgis.firstproject.framework.config;

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
/**
 * 跨域設定
 * @Zz
 */
@Component
public class CorsFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpServletResponse = (HttpServletResponse) response;
        HttpServletRequest httpServletRequest = (HttpServletRequest) request;
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With");
        httpServletResponse.setHeader("Access-Control-Allow-Origin",httpServletRequest.getHeader("Origin"));
        httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(request, response);
    }

    @Override
    public void destroy() {

    }
}

對訪問進行封裝：

src目錄下新建services資料夾，在建立login.js

login.js

import ax from '@/config/axios'
import config from '@/config/index'
const {baseURL} = config
export const login = params => ax.post(baseURL + '/login', params) // 使用者登入

在登陸頁Login.vue中引用

// 引用login.js
import {
  login
} from '@/services/login'

// 傳送登陸請求改為
 handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          // 配置預設介面地址，封裝引數傳送，以下注釋中的請求也可以（二選一）
          /* const para = Object.assign({}, this.user)
            setTimeout(() => {
            login(para).then(res => {

            }).catch(() => {
              // 登陸失敗操作
            }, 500)
          }) */
          // 帶參傳送
          setTimeout(() => {
            login({
              account: this.user.account,
              password: this.user.password
            }).then(res => {

            }).catch(() => {
              // 登陸失敗操作
            }, 500)
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }