一种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'))
}

该跨域方案的优点是

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

该跨域方案的要求是

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

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

原文 

https://segmentfault.com/a/1190000022207767

本站部分文章源于互联网,本着传播知识、有益学习和研究的目的进行的转载,为网友免费提供。如有著作权人或出版方提出异议,本站将立即删除。如果您对文章转载有任何疑问请告之我们,以便我们及时纠正。

PS:推荐一个微信公众号: askHarries 或者qq群:474807195,里面会分享一些资深架构师录制的视频录像:有Spring,MyBatis,Netty源码分析,高并发、高性能、分布式、微服务架构的原理,JVM性能优化这些成为架构师必备的知识体系。还能领取免费的学习资源,目前受益良多

转载请注明原文出处:Harries Blog™ » 一种SpringBoot+Vue 配合跨域方案

赞 (0)
分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址