前端实现跨域

1、配置vue.config.js文件
vue.config.js

let proxyObj = {}

proxyObj['/'] = {
  //websocket
  ws:false,
  //目标地址后端服务器地址
  target: 'http://localhost:8081',
  //发送请求头host会被设置target
  changeOrigin: true,

  pathReWrite:{
    '^/':'/'
  },
}

module.exports = {
  devServer:{
    host:'localhost',
    port:8080,
    proxy:proxyObj
  }
}

2、设置自己的utils工具包api.js
utils/api.js

import axios from 'axios'
import {Message} from "element-ui";
import router from '../router'
import Vue from 'vue'

axios.defaults.baseURL = '/'
Vue.prototype.axios = axios

// 请求拦截器
axios.interceptors.request.use(config=>{
    if (window.sessionStorage.getItem('tokenStr')) {
//请求携带自定义token
        config.headers['Authorization'] =
            window.sessionStorage.getItem('tokenStr');
    }
    return config
},error => {
    console.log(error);
})

//响应拦截器
axios.interceptors.response.use(success => {
    //业务逻辑错误
    if (success.status && success.status == 200) {
        if (success.data.code == 500 || success.data.code == 401 ||
            success.data.code == 403) {
            Message.error({message: success.data.message});
            return;
        }
        if (success.data.message) {
            Message.success({message: success.data.message});
        }
    }
    return success.data;
}, error => {
    if (error.response.code == 504 || error.response.code == 404) {
        Message.error({message: '服务器被吃了o(╯□╰)o'});
    } else if (error.response.code == 403) {
        Message.error({message: '权限不足，请联系管理员！'});
    } else if (error.response.code == 401) {
        Message.error({message: '尚未登录，请登录'});
        router.replace('/');
    } else {
        if (error.response.data.message) {
            Message.error({message: error.response.data.message});
        } else {
            Message.error({message: '未知错误！'});
        }
    }
    return;
});

let base = '';

//传送json格式的post请求
export const postRequest = (url, params) => {
    return axios({
        method: 'post',
        url: `${base}${url}`,
        data: params
    })
}
//传递json的put请求
export const putRequest = (url, params) => {
    return axios({
        method: 'put',
        url: `${base}${url}`,
        data: params
    })
}
//传递json的get请求
export const getRequest = (url, params) => {
    return axios({
        method: 'get',
        url: `${base}${url}`,
        data: params
    })
}
//传递json的delete请求
export const deleteRequest = (url, params) => {
    return axios({
        method: 'delete',
        url: `${base}${url}`,
        data: params
    })
}

3、登录时引用的this.postRequest,
用this的前提是
main.js 中要配置全局属性
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import axios from "axios";

import {postRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {getRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";

Vue.use(ElementUI);
Vue.config.productionTip = false
Vue.prototype.axios = axios

Vue.prototype.postRequest = postRequest
Vue.prototype.putRequest = putRequest
Vue.prototype.getRequest = getRequest
Vue.prototype.deleteRequest = deleteRequest

Views/Login.Vue

<template>
  <div>
    <el-form ref="loginForm" :model="loginForm"  class="loginForm" :rules="rules">
      <h2 class="loginTitle">欢迎登录</h2>
      <el-form-item label="用户名"  prop="username">
        <el-input type="text" auto-complete="false" v-model="loginForm.username" placeholder="请输入用户名">
        </el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" auto-complete="false" v-model="loginForm.password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item  prop="code" >
        <el-input type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码" class="loginFormcode"></el-input>
        <img :src="captcharUrl" class="logincode"  @click="updatecaptchar()">
      </el-form-item>

      <el-form-item>

        <el-button type="primary" style="width: 100%" @click="submitLogin">登录</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>


export default {
  name: "Login",
  data(){
    return{
      captcharUrl: '/captcha?time'+new Date(),
      loginForm:{
        username:'admin',
        password:'1234',
        code:""
      },
      rules:{
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        code: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      }
    }
  },

  methods:{
    updatecaptchar(){
      this.captcharUrl = '/captcha?time'+new Date();
    },
    submitLogin(){
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.postRequest('/login', this.loginForm).then(resp => {
              //alert(JSON.stringify(resp));
              //存储用户token
            if (resp){
              const tokenStr = resp.object.tokenHead+resp.object.token;
              window.sessionStorage.setItem('tokenStr', tokenStr);
              //清空菜单

              //页面跳转
              this.$router.replace('/home');
            }

          })
        } else {
          this.$message.error('请输入所有字段');
          return false;
        }
      })
    }
  }
}
</script>

<style scoped>
.loginForm{
  border-radius: 15px;
  background-clip: padding-box;
  margin: 70px  auto;
  width: 450px;
  padding: 15px 35px 35px 15px;
  background: #fff;
  border:1px solid #eaeaea;
  box-shadow:0 0 25px aqua;
}
.loginTitle{
  margin: 0 auto 40px auto;
  text-align: center;
  color: #505458;
}
.loginFormcode{
  text-align: left;
  width: 330px;
}
.logincode{
  width: 110px;
  height: 40px;
  margin-left: 8px;
  position: absolute;
  border-radius: 5px;
}



</style>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from "../views/Home";
Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },

]

const router = new VueRouter({
  routes
})

export default router