转载

一种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) {
  return request({
    url: '/api/receive-task/list-3day-recent',
    method: 'get',
    params: data
  })
}
// 流程按发生时间倒序分页
export function getStepEventList(data) {
  return request({
    url: '/api/event/step-event-page',
    method: 'get',
    params: data
  }).then(e => format(e, 'flow'))
}

该跨域方案的优点是

不需要vue proxyTable配置
避免nginx的代理配置
npm dev 和 build 互不影响，开发测试和生产部署时无需修改代API调用地址

该跨域方案的要求是

后端springboot服务采用@CrossOrigin支持跨域

目前我也尝试过在后台不用@CrossOrigin 而采用Filter的方式进行跨域，不过该方案无法方形method option的请求，在restful跨域时，前端一般需要在header中写入token信息，这会在让浏览器在跨域时先发起一个option请求，从而导致filter方案的失效。如果有时间，可以查看一下@CrossOrigin 应该可以通过拦截器或者过滤器实现后台全局跨域支持。

正文到此结束