[VUE + TYPESCRIPT] Rest Api & Cors 처리

VUE.JS 목록

 

RestApi 클래스

$ npm install axios

 

.env

VUE_APP_API_PUBLIC_URL='http://localhost:8888/v1/'
VUE_APP_API_BASE_URL='http://localhost:8888/v1/'

 

 

utils/restApi.ts

import axios, { AxiosInstance, AxiosResponse } from 'axios'

export enum ServiceUrl {
  BASE = process.env.VUE_APP_API_BASE_URL
}

export default abstract class HttpClient {
  public apiUrl?: string;
  protected readonly instance: AxiosInstance;

  public constructor (
    serviceUrl?: ServiceUrl,
    apiUrl?: string
  ) {
    this.apiUrl = apiUrl
    this.instance = axios.create({
      baseURL: serviceUrl || process.env.VUE_APP_API_PUBLIC_URL,
      headers: {
        'Cache-Control': 'no-cache',
        'Access-Control-Allow-Origin': '*',
        'Content-Type': 'application/json; charset = utf-8'
      }
    })
    this._requestInterceptor()
    this._responseInterceptor()
  }

  /**
   * 인증처리
   */
  public setAxiosAuth = () => {
    // console.log('setAxiosAuth')
  }

  /**
   * 요청 Interceptor
   */
  private _requestInterceptor = () => {
    this.instance.interceptors.request.use(this._handleRequest)
  };

  private _handleRequest = (req: any) => {
    // loading 추가
    return req
  };

  /**
   * 응답 Interceptor
   */
  private _responseInterceptor = () => {
    this.instance.interceptors.response.use(
      this._handleResponse,
      this._handleError
    )
  };

  private _handleResponse = (res: AxiosResponse) => {
    // loading 제거
    return res.data
  };

  /**
   * 오류 처리
   */
  protected _handleError = (error: any) => {
    console.error(error)
  }
}

/**
 * RestApi 객체
 */
export class RestApi<T> extends HttpClient {
  public apiUrl: string;
  private _type!: { new(): T}

  public constructor (
    apiUrl: string,
    _type: { new(): T}
  ) {
    super(undefined, apiUrl)
    this.apiUrl = apiUrl
    this._type = _type
  }

  /**
   * Get 조회합니다.
   */
  public get = async () => {
    await this.setAxiosAuth()
    const res: any = await this.instance.get<T>(`${this.apiUrl}`)
    return this.castType(res)
  }

  /**
   * Post 전송합니다.
   */
  public post = async (item: any) => {
    await this.setAxiosAuth()
    const res: any = await this.instance.post<T>(`${this.apiUrl}`, item)
    return this.castType(res)
  }

  castType = (item: any) => Object.assign(new this._type(), item);
}

 

통신하기

<template>
  <div>
    <v-btn @click="getApi">Get Api</v-btn>
    <v-btn @click="postApi">Post Api</v-btn>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { RestApi } from '@/utils/restApi'

/**
 * 데이터 객체를 정의한다.
 */
export class DataType {
  date?: string;
  number?: string;
}

@Component
export default class Test1View extends Vue {
  testApi = new RestApi('/api/path', DataType)

  async postApi () {
    const data = {
      date: '20201221',
      number: 'S002'
    }
    const res = await this.testApi.post(data)
    console.log(res)
  }

  async getApi () {
    const res: DataType = await this.testApi.get()
    console.log(res)
  }
}
</script>

 

 

 

 

Spring Boot CORS 처리

interceptor/SecurityConfig.java

package com.sk.aibril.tsrassistant.interceptor;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class SecurityConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST");
    }
}

 

VUE.JS 목록