一種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 應該能夠經過攔截器或者過濾器實現後臺全局跨域支持。