axios Cross Origin

안녕하세요  

 

저는 프론트단으로는 vue를 사용하고 있으며 백단으로 spring을 사용하고 있습니다. 

그러하여 둘은 다른 포트를 사용하므로 통신에 있어서 크로스 오리진 설정이 필요합니다. 

설정을 하지 않을 경우 아래 이미지와 같이 오류가 발생하여 제대로 된 통신이 이루어지지 않습니다. 

저는 우선 통신을 위해 vue에서 axios를 통해 비동신 통신을 사용합니다. 

 

1.vue axios 설치 

npm install axios 

 

2.main.js 내 axios 크로스 오리진 허용 설정 

import axios from 'axios'
axios.defaults.baseURL='http://localhost:8080';
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';
axios.defaults.headers.post['Access-Control-Allow-Origin'] = '*';

3.버튼 생성 후 스크립트 내 axios로 호출 

<template>
  <div class="about">
    <b-button @click="allCategory">Button</b-button>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  name:'qweqwe',

  data(){
    return {

    };
  },
  mounted(){

  },
  methods:{
      allCategory:function(){
          axios.get('/v1/category')
            .then(function(response) {
            console.log(response);
            })
            .catch(function(error) {
            console.log(error);
            });
      },
  }
};
</script>

4.spring 쪽 설정 

애노테이션을 통해 개별적으로 설정을 할 수 있지만 공통적으로 config를 만드는 방식이 더 좋을 것 같습니다. 

4-1 config class 설정 

config 관련 패키지를 만들고 해당 패키지 안에 webconfig class를 생성합니다. 

package com.bestFoodBack.bestBoodBack.config;

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 WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST")
                .maxAge(3000);
    }
}

 

4-2 애노테이션 설정 

CrossOrigin 애노테이션을 추가하며 프론트의 주소를 기입합니다. 

@RequiredArgsConstructor
@RestController
@RequestMapping("/v1")
public class CategoryController {

    private final CategoryRepository categoryRepository;
    @CrossOrigin(origins = "http://localhost:8081")
    @GetMapping("/category")
    public List<Category> getCategory() {

        return categoryRepository.findAll();
    }

}

 

결과 

아래와 같이 정상적으로 응답을 확인할 수 있습니다. 

 

 

cf) 여담으로 포트 고정 설정을 위해 

vue 에서는 package.json 내 scripts에 고정 port를 설정할 수 있습니다. 

 "scripts": {
    "serve": "vue-cli-service serve --port 8081",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

springboot에서는 application.properties에서 고정 port를 설정 할 수 있습니다. 

(저는 좀 더 식별의 용이성을 위해 properties -> yml 으로 변경했습니다. ) 

server:
  port : "8080"