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を呼び出す場所では、src/api/consoleのようなbaseurlを環境変数で設定することができる.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ドメイン間では、フロントエンドがヘッダにtoken情報を書き込む必要があります.これにより、ブラウザがドメイン間でoption要求を開始し、filterスキームの失効を招きます.時間がある場合は、@CrossOriginがブロッカーまたはフィルタを使用してバックグラウンドグローバルドメイン間サポートを実現できることを確認してください.