Nuxt.js Axios CORS Error

삽질기록 : Nginx + Nuxt.js / Axios, CORS

Nuxt.js / nuxt.config.js 에 설정된 모듈(modules) 에서 설정된 axios 모듈(https://axios.nuxtjs.org) 을 사용하던 중 CORS 이슈가 발생하였다.

현재 개발중인 서비스의 구성인 Nginx + Nuxt.js 프록시로 구성되어있다.

80 : Nginx ( http://www.jkun.net )

3000 : Nuxt ( http://localhost:3000 )

이 중 POST 로 통신을 하다보니 다음과 같은 에러가 발생하는 이슈였다.

Failed to load http://www.jkun.net: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

이에 nuxt.config.js 를 다음과 같이 axios 모듈에 대한 설정을 추가하였다.

이제 정상적으로 작동한다.

하지만 프로젝트가 끝나고 난 후에는 전반적으로 코드 리팩토링을 하면서 디테일하게 구조를 분석해야 할 것 같다.