SpringBoot + vue 解决跨域问题

首先我是一个Java程序员，近来想写前端就自学了vue。关于前后端分离前端请求跨域问题记录下来，以供大家参考。

先写了个后端接口

非常简单的前端调用的测试接口：

 @GetMapping("/userLogin/{username}/{password}")
    public String login(@PathVariable("username") String username, @PathVariable("password") String password){
        log.info(username+"---"+password);
        return username+"-"+password;
    }

由于前端刚接触研究的时间比较多：

首先项目前端入口main.js

import apiConfig from '../config/api.config'
import Vue from 'vue'
import index from './index'
import axios from 'axios'
Vue.config.productionTip = false
Vue.prototype.$axios = axios
axios.defaults.baseURL = apiConfig.baseUrl // 配置默认发送请求到http://127.0.0.1:8888，可改或者加端口号 为了动态获取

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { index },
  template: '<index/>'
})

这个main.js中导入了一个新建的api.config.js文件

const isPro = Object.is(process.env.NODE_ENV, 'production')

module.exports = {
    baseUrl: isPro ? 'http://localhost:8888/api/' : 'api/'
}

最重要的就是配置代理：

 assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {
      '/api/**': {
            target: 'http://localhost:8888',//设置调用的接口域名和端口号（默认端口号80）
            changeOrigin: true, //设置请求头
            pathRewrite: { //路径重写
                '^/api': '/' 
              }
              //这里理解成用‘/api’代替target里面的地址，
              //后面组件中我们掉接口时直接用api代替 
              //比如我要调用'http://40.00.100.100:3002/user/add',
              //直接写‘/api/user/add’即可
        }
    },

最后写了一个get请求：

<template>
    <div id="api">
        <div id="login">
            <div class="username" ><input v-model="username" placeholder="用户名"></div>
            <div class="username"><input v-model="password" placeholder="密码"></div>
            <button id="loginSumbit" @click="loginSumbit">登录</button>
        </div>
    </div>
</template>

<script>
import axios from 'axios'
export default {
     data(){
         return{
             username: '',
             password: ''
         }
     },
     methods: {
        loginSumbit(){
           axios.get('/v1/userLogin/'+this.username+'/'+this.password,{
            }).then(data => {
                console.log(data);
            }).catch(error => {
                console.log('请求失败：' + error);
            })
        }
     }
}
</script>

请求成功！

SpringBoot + vue 解决跨域问题