一种SpringBoot+Vue 配合跨域方案

  后台SpringBoot通过@CrossOrigin实现跨域后,前台可以直接调用跨域,后台controller写法可以参考
@CrossOrigin
public class DutyController extends BaseController{
    @Autowired
    DutyService dutyService;

    @ApiOperation(value="分页获取测试", notes="分页获取测试", produces="application/json")
    @ApiImplicitParams({
            @ApiImplicitParam(paramType = "header", dataType = "String", name = "token",
                    example="token-swagger", required = true),
            @ApiImplicitParam(name="page_no",value="用户名",dataType="int", paramType = "query",example="1"),
            @ApiImplicitParam(name="page_size",value="用户id",dataType="int", paramType = "query",example="10")
    })
}
在前端vue程序中,如果您以前配置过vue 的proxy跨域代理,请首先将其注释掉,然后在项目跟目录创建开发(deployment)文件---.env.development和 生产(prod)的环境变量文件---.env.production
  • .env.development文件内容
# just a flag
ENV = 'development'

# base api
# 这个变量主要用于mockjs的模拟登陆
# 如果实现后台登陆完全可以不需要配置两个api 直接使用一个base-url
VUE_APP_BASE_API = '/dev-api'

# 这个rul主要用于测试期间的业务API测试
# monitor manage api
VUE_APP_MONITOR_MANAGE_API = 'http://localhost:8081/monitor_manage'

# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js
# 这个变量用于在npm run dev 时 mockjs打包时可以调用es6语法 具体参见上面的vue-template-admin官方说明
VUE_CLI_BABEL_TRANSPILE_MODULES = true
  • .env.production文件内容
# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'

VUE_APP_MONITOR_MANAGE_API = 'http://188.131.222.102:8181/monitor_manage/'
在axios调用api的地方,就可以采用环境变量的方式来设置baseurl,例如src/api/console.js值班控制台的api调用
import request from '@/utils/request'
request.defaults.baseURL = process.env.VUE_APP_MONITOR_MANAGE_API

// 列出近3天的数据接收任务
export function get3dayList(data) {
  retu