spring boot 与Vue前后端分离项目---请求路径跨域问题分析解决方法

前端

1.设置过滤路径

2.在main.js引入所需模块

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// UI组件
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'
import NProgress from "nprogress" //  导入 nprogress模块
import "nprogress/nprogress.css" // 导入样式，否则看不到效果

// 规范提示 true:开启
Vue.config.productionTip = false

// 配置请求的跟路径
axios.defaults.baseURL = ''
// 显示右上角螺旋加载提示
NProgress.configure({ showSpinner: false });

// 请求
// 挂载到原型对象之前，先设置拦截器，通过axios请求拦截器添加token,保证拥有获取数据的权限
axios.interceptors.request.use(config =>{
  // 在请求拦截器中，显示进度条
  NProgress.start()
  // 为请求头对象添加Token验证Authorization字段
  config.headers.Authorization = window.sessionStorage.getItem("token")
  //返回初始化
  return config
})

// 响应
axios.interceptors.response.use(config =>{
  NProgress.done()
  return config
})


//原型上挂载请求,所有组件都可以直接调用
Vue.prototype.$http = axios


Vue.use(Element, { size: 'small', zIndex: 3000 });
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.在vue.config.js设置代理用于跨域

'use strict'
const path = require('path')
const defaultSettings = require('./src/settings.js')
function resolve (dir) {
    return path.join(__dirname, dir)
}
const name =defaultSettings.title   //网络标题
const port = process.env.port || process.env.npm_config_port || 8888 // dev port

// All configuration item explanations can be find in https://cli.vuejs.org/config/
module.exports = {
    /**
     * You will need to set publicPath if you plan to deploy your site under a sub path,
     * for example GitHub Pages. If you plan to deploy your site to https://foo.github.io/bar/,
     * then publicPath should be set to "/bar/".
     * In most cases please use '/' !!!
     * Detail: https://cli.vuejs.org/config/#publicpath
     */
    // 部署生产环境和开发环境下的URL
    publicPath: './',
    /* 输出文件目录：在npm run build时，生成文件的目录名称 */
outputDir: 'dist/webapp',
    /* 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 */
assetsDir: 'assets',
// lintOnSave: process.env.NODE_ENV === 'development',
    /* 代码保存时进行eslint检测 */
lintOnSave: true,
    /* 是否在构建生产包时生成 sourceMap 文件，false将提高构建速度 */
productionSourceMap: false,

devServer: {
    port: port,
    /* 自动打开浏览器 */
    open: true,
    /* 设置为0.0.0.0则所有的地址均能访问 */
    host:'0.0.0.0',
    https: false,
    hotOnly: false,
    // 热替换功能，自动刷新页面
    hot: true,
    overlay: {
        warnings: false,
        errors: false
    },
    proxy: {
        '/app': {
            target: 'http://127.0.0.1:8089', // 你请求的第三方接口
            timeout: 60 * 60 * 1000,
            // 允许跨域
            changeOrigin: false, // 在本地会创建一个虚拟服务器，然后发送请求的数据，并同时会接收数据,这样服务端和客户端进行数据交互就不会有跨域问题
            secure: false,
            // 替换路径
            pathRewrite: {
                '^/app': '' //规定请求地址以什么作为开头
            }
        }
    }
},
configureWebpack: {
    // provide the app's title in webpack's name field, so that
    // it can be accessed in index.html to inject the correct title.
    name: name,
    resolve: {
        alias: {
            '@': resolve('src'),
            // '@crud': resolve('src/components/Crud')
        }
    }
},

runtimeCompiler: undefined,
parallel: undefined,
css: undefined,
transpileDependencies: [
    'vue-echarts',
    'resize-detector'
]
}

axios的使用

注意：1.当axios为get请求时，后端不可以使用参数注解，否则控制台会报错，或者后端控制台有预警，但不显示报错。

解决方法：
	RequestMethod.POST  替换为 RequestMethod.GET
	去除：@RequestBody注解
```![在这里插入图片描述](https://img-blog.csdnimg.cn/00d891cb647f4021a47d6364c89ec487.png)
前端的使用

```c
this.$http在 main.js是否挂载，已挂载跨域直接使用
this.$http 或者 axios.post(baseRoot+'/home/login',this.ruleForms)
                        .then(res => this.$router.push('/login'))
                    .catch(err =>{data = err})