[Vue.js] Spring-boot와 vue-cli 연동, cors문제 해결

이번에 뷰를 스프링부트와 함께 활용해보았는데

빌드된 뷰 파일들이 스프링부트에서 제대로 출력될 수 있게  연동시키는 과정과

개발 중에 axios를 활용해 개발서버에 데이터를 요청하는 방법에 대해 포스팅하겠습니당.

---

1. Spring-boot의 정적 파일 위치 이해

src>main>resources>static

이 위치에 정적 파일이 위치하게 됩니다.

 

그렇다면 vue를 빌드했을 때 생성되는 파일들이 저 위치에 들어갈 수 있게 해주어야 합니다.

 

2. vue.config.js 만들기

1) 디렉토리 설정

module.exports ={
    outputDir: "../src/main/resources/static",
    indexPath: "../static/index.html"
};

• outputDir - 배포 후 파일을 생성할 경로를 지정
• indexPath - outputDir기준으로 index파일의 위치를 지정

2) proxy 서버 설정

proxy라는 것은 두 서버의 중계 기능을 담당하게 됩니다.

vue.config.js에 proxy서버를 지정해주고 axios에서 활용하면 cors문제를 해결할 수 있습니다.

module.exports ={
    outputDir: "../src/main/resources/static",
    indexPath: "../static/index.html",

    devServer: {
        proxy: {
            '/': {
                "target": 'http://localhost:8080/',
                "pathRewrite": { '^/': '' },
                "changeOrigin": true,
                "secure": false
            }
        }
    }
};

 

• target - 개발 서버 주소를 타겟으로 지정
• pathRewrite - 요청 주소의 시작이 '/'이면 해당 부분은 ""로 대체되고 target뒤에 이어지게 됨

3. axios에서 활용

axios.get('/api',{
    	headers: {
    		'Access-Control-Allow-Origin': '*',
    		'Content-Type': 'application/json; charset = utf-8'
    	}
    })
    .then(response => {
    	console.log(response.data);
    })
    .catch(e => {
    	console.log('error : ', e)
    })

axios를 활용해 http request를 요청하게 된다면 위와 같이 활용할 수 있습니다.

get 요청을 보낼 api 주소를 입력할 때 위처럼 /api 한다면

http://localhost:8080/api 에 요청을 보내는 것과 같은 것입니다.

이런식으로 활용하면 cors문제를 해결하고 서버로 부터 데이터를 받을 수 있습니다.