# Axios for Nuxt

@nuxtjs/axios (opens new window) ๋ชจ๋“ˆ์€ Nuxt์™€ ์—ฐ๋™ํ•ด์„œ ์—‘์‹œ์˜ค์Šค(Axios)๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์ธํ„ฐํŽ˜์ด์Šค๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ์•ž์œผ๋กœ ์ด ๊ธ€์—์„œ ์–ธ๊ธ‰๋  $axios๋Š” Nuxt์šฉ ์—‘์‹œ์˜ค์Šค ์ธ์Šคํ„ด์Šค๋ฅผ ๋œปํ•ฉ๋‹ˆ๋‹ค.

# ์ฃผ์š” ํŠน์ง•

  • ์˜ต์…˜์„ ํ†ตํ•ด ๋Ÿฐํƒ€์ž„ ํ™˜๊ฒฝ(์„œ๋ฒ„, ํด๋ผ์ด์–ธํŠธ)์— ๋”ฐ๋ผ ์‚ฌ์šฉํ•  ๊ธฐ๋ณธ URL(Base URL)์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์˜ต์…˜์„ ํ†ตํ•ด @nuxtjs/proxy (opens new window)์™€ ์—ฐ๊ณ„ํ•˜์—ฌ ํ”„๋ก์‹œ(Proxy (opens new window))๋ฅผ ์‰ฝ๊ฒŒ ํ—ˆ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ์˜ต์…˜์„ ํ†ตํ•ด axios-retry (opens new window)์™€ ์—ฐ๊ณ„ํ•˜์—ฌ ๋น„๋™๊ธฐ ์š”์ฒญ ์‹คํŒจ์— ๋”ฐ๋ฅธ ์žฌ์ „์†ก ์˜ต์…˜์„ ์‰ฝ๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • Nuxt์˜ ํ”„๋กœ๊ทธ๋ ˆ์Šค ๋ฐ”(Progress Bar (opens new window))์™€ ์ž๋™์œผ๋กœ ์—ฐ๋™๋ฉ๋‹ˆ๋‹ค.
  • ํ—ฌํผ ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด $axios์˜ ์ธํ„ฐ์…‰ํ„ฐ, ํ† ํฐ, ํ—ค๋”, ๊ธฐ๋ณธ URL์„ ์‰ฝ๊ฒŒ ์„ค์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
  • ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ์ปค์Šคํ…€ $axios๋ฅผ Vue ์ธ์Šคํ„ด์Šค์— ์ฃผ์ž…(Inject) ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

# ์„ค์น˜ ๋ฐ ๋“ฑ๋ก

Nuxt ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค์น˜ํ•  ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์ด Axios ์˜ต์…˜์„ ์„ ํƒํ•˜๋ฉด ํŒจํ‚ค์ง€ ์„ค์น˜๋ถ€ํ„ฐ ๋ชจ๋“ˆ ๋“ฑ๋ก๊นŒ์ง€ ์ž๋™์œผ๋กœ ์ง„ํ–‰๋ฉ๋‹ˆ๋‹ค.

install-axios

์ด๋ฏธ ํ”„๋กœ์ ํŠธ๋ฅผ ์„ค์น˜ํ•œ ์ƒํƒœ๋ผ๋ฉด ์•„๋ž˜์˜ ๋ฐฉ๋ฒ•์œผ๋กœ ํŒจํ‚ค์ง€ ์„ค์น˜์™€ ๋ชจ๋“ˆ ๋“ฑ๋ก์„ ์ง„ํ–‰ํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

npm install @nuxtjs/axios
// nuxt.config.js
export default {
  modules: ["@nuxtjs/axios"],
};

# ๊ธฐ๋ณธ ํ™œ์šฉ๋ฒ•

ํŒจํ‚ค์ง€ ์„ค์น˜์™€ ๋ชจ๋“ˆ ๋“ฑ๋ก์ด ๋๋‚˜๋ฉด VueComponent ์ธ์Šคํ„ด์Šค์™€ context์— ๋“ฑ๋ก์ด ๋˜๋ฏ€๋กœ ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

<script>
export default {
    async asyncData({ $axios }){
        const { data } = await $axios.get(...);
        ...
    },
    async fetch(){
        const { data } = await this.$axios.get(...);
        ...
    },
}
</script>

TIP

$axios ์‘๋‹ต(Response) ๊ฐ’์— data ๊ตฌ์กฐ ๋ถ„ํ•ด ํ• ๋‹น์ด ๋ฒˆ๊ฑฐ๋กœ์šธ ๊ฒฝ์šฐ, ์•„๋ž˜์™€ ๊ฐ™์ด $axios์˜ ์š”์ฒญ(Request) ๋ฉ”์„œ๋“œ ์•ž์— $๋ฅผ ๋ถ™์—ฌ์„œ ํŽธ๋ฆฌํ•˜๊ฒŒ data ์†์„ฑ ๊ฐ’์„ ๋ฐ›์•„ ์˜ฌ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ฐธ์กฐ (opens new window)

async fetch(){
    console.log(
        JSON.stringify(await this.$axios.$get('/products'))
        === JSON.stringify((await this.$axios.get('/products')).data)
    ) // true
}

# ์˜ต์…˜

Nuxt ์„ค์ • ํŒŒ์ผ์— ์˜ต์…˜์„ ๋ช…์‹œํ•˜์—ฌ $axios์˜ ํ™˜๊ฒฝ ์„ค์ •(Configuration)์„ ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋ณธ๋ฌธ์—์„œ๋Š” ์ž์ฃผ ์“ฐ์ด๋Š” ์˜ต์…˜๋“ค ์œ„์ฃผ๋กœ ์„ค๋ช…ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค.

TIP

$axios์˜ ํ™˜๊ฒฝ ์„ค์ •์€ ์ด ๋‘ ์ฐจ๋ก€์— ๊ฑธ์ณ ์ผ์–ด๋‚ฉ๋‹ˆ๋‹ค. Nuxt ์„ค์ • ํŒŒ์ผ์„ ํ†ตํ•ด์„œ ์„ค์ •์ด ์šฐ์„  ์ ์šฉ๋˜๊ณ  ๋‘ ๋ฒˆ์งธ๋กœ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ์„ค์ •์ด ์ถ”๊ฐ€ ์ ์šฉ๋ฉ๋‹ˆ๋‹ค.

# Host, Port, Prefix

ํ˜ธ์ŠคํŠธ(Host), ํฌํŠธ(Port), ํ”„๋ฆฌํ”ฝ์Šค(Prefix)๋Š” ์ดํ›„์— ์–ธ๊ธ‰ํ•  baseURL๊ณผ browserBaseURL์˜ ๋””ํดํŠธ ๊ฐ’์— ์‚ฌ์šฉ๋˜๋Š” ๊ฐ’์ž…๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด Nuxt ์„ค์ • ํŒŒ์ผ์— ๋ช…์‹œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  // $axios์˜ baseURL์„ https://example.com:9000/๋กœ ์„ค์ •
  axios: {
    host: "https://example.com",
    port: "9000",
    prefix: "/",
  },
};

๋˜๋Š” ํ™˜๊ฒฝ ๋ณ€์ˆ˜์— API_HOST, API_PORT, API_PREFIX๋กœ ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// .env
API_HOST=https://example.com
API_PORT=9000
API_PREFIX=/

# BaseURL

$axios์˜ baseURL ์†์„ฑ์€ ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ๊ธฐ๋ณธ URL์ด ๋˜๋Š” ๊ฐ’์ž…๋‹ˆ๋‹ค. ๋””ํดํŠธ ๊ฐ’์€ http://[HOST]:[PORT][PREFIX] ๊ฐ’์œผ๋กœ ์œ„์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ ํ˜ธ์ŠคํŠธ, ํฌํŠธ, ํ”„๋ฆฌํ”ฝ์Šค๊ฐ€ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค. ๋˜๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด ์ง์ ‘ baseURL์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  axios: {
    baseURL: "http://localhost:8080/modules",
  },
};

๋˜๋Š” ํ™˜๊ฒฝ ๋ณ€์ˆ˜์— API_URL๋กœ ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// .env
API_URL=http://localhost.com:8080/modules

# BrowserBaseURL

browserBaseURL ์†์„ฑ์€ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์—์„œ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ ๊ธฐ๋ณธ URL์ด ๋˜๋Š” ๊ฐ’์ž…๋‹ˆ๋‹ค. ์œ„์—์„œ ์–ธ๊ธ‰ํ•œ baseURL์„ ๋””ํดํŠธ ๊ฐ’์œผ๋กœ ๊ฐ€์ง‘๋‹ˆ๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์ด ์ง์ ‘ browserBaseURL์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  axios: {
    browserBaseURL: "https://learnNuxt.com:8080/modules",
  },
};

๋˜๋Š” ํ™˜๊ฒฝ ๋ณ€์ˆ˜์— API_URL_BROWSER๋กœ ๊ฐ’์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// .env
API_URL_BROWSER=https://learnNuxt.com:8080/modules

# Proxy

@nuxtjs/axios๋ฅผ ์„ค์น˜ํ•˜๋ฉด ์˜์กด์„ฑ(Dependency)์— ์˜ํ•ด์„œ ์ž๋™์œผ๋กœ @nuxtjs/proxy (opens new window)๊ฐ€ ์„ค์น˜๋ฉ๋‹ˆ๋‹ค. ๋‹ค์Œ๊ณผ ๊ฐ™์ด axios.proxy๋ฅผ true๋กœ ์„ค์ •ํ•˜๋ฉด $axios์˜ ํ”„๋ก์‹œ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  axios: {
    proxy: true,
  },

  proxy: {
    "/api/": "http://api.example.com",
    "/api2/": "http://api.another-website.com",
  },
};

# Retry

@nuxtjs/axios๋ฅผ ์„ค์น˜ํ•˜๋ฉด ์˜์กด์„ฑ์— ์˜ํ•ด์„œ ์ž๋™์œผ๋กœ axios-retry (opens new window)๊ฐ€ ์„ค์น˜๋ฉ๋‹ˆ๋‹ค. ์ด ๋ชจ๋“ˆ์„ ์ ์šฉํ•˜๋ฉด $axios ์š”์ฒญ ์‹คํŒจ ์‹œ ์ž๋™์œผ๋กœ ๊ฒฐ๊ณผ๋ฅผ ๊ฐ€๋กœ์ฑ„์„œ ๋‹ค์‹œ ์š”์ฒญ์„ ๋ณด๋ƒ…๋‹ˆ๋‹ค. Nuxt ์„ค์ • ํŒŒ์ผ์˜ axios.retry๋ฅผ true๋กœ ์„ค์ •ํ•˜๊ฑฐ๋‚˜ retryOptions (opens new window)๋ฅผ ์ง€์ •ํ•˜๋ฉด ์š”์ฒญ ์‹คํŒจ์— ๋”ฐ๋ฅธ ์ž๋™ ์žฌ์š”์ฒญ์ด ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค. ์ฐธ๊ณ ๋กœ ์žฌ์ „์†ก ํšŸ์ˆ˜์˜ ๋””ํดํŠธ๋Š” 3ํšŒ์ž…๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  axios: {
    retry: {
      retries: 4, // ์ตœ๋Œ€ ์žฌ์ „์†ก ํšŸ์ˆ˜ 4ํšŒ
      shouldResetTimeout: true, // ์žฌ์ „์†ก ๊ฐ„ ํƒ€์ž„์•„์›ƒ์„ ๋ฆฌ์…‹ํ•˜๊ธฐ
      retryDelay: (retry) => {
        return retry * 100; // ์žฌ์ „์†ก ํšŸ์ˆ˜ * 0.1์ดˆ๋งŒํผ ์žฌ์ „์†ก ์‹œ์ž‘ ์‹œ๊ฐ„์„ ์ง€์—ฐ์‹œํ‚ค๊ธฐ
      },
      retryCondition: (error) => err.response.status === 429, // ์„œ๋ฒ„ ํ˜ผ์žก์ด ์ผ์–ด๋‚ฌ์„ ๊ฒฝ์šฐ์—๋งŒ ์žฌ์ „์†กํ•˜๊ธฐ
    },
  },
};

# Progress

Nuxt์˜ ํ”„๋กœ๊ทธ๋ ˆ์Šค ๋ฐ”(Progress Bar)์— ์—ฐ๋™ํ•ด์„œ ์š”์ฒญ ๋™์•ˆ ๋กœ๋”ฉ ๋ฐ”(Loading Bar)๋ฅผ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค. ์ด ์„ค์ •์€ ๋””ํดํŠธ๋กœ ์„ค์ •๋˜์–ด ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋กœ๋”ฉ ๋ฐ”๋ฅผ ๋ณด์—ฌ์ฃผ๊ณ  ์‹ถ์ง€ ์•Š๋‹ค๋ฉด Nuxt ์„ค์ • ํŒŒ์ผ์— ์ด๋ฅผ ๋ช…์‹œํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  axios: {
    progress: false, // ๋กœ๋”ฉ ๋ฐ”๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ
  },
};

๊ฐœ๋ณ„ ์š”์ฒญ์—๋งŒ ์ ์šฉํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด ๋‹ค์Œ๊ณผ ๊ฐ™์ด ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

this.$axios.$get("...", { progress: false });

# ๊ทธ ์™ธ ์˜ต์…˜

์œ„์—์„œ ์–ธ๊ธ‰๋˜์ง€ ์•Š์€ ์˜ต์…˜๋“ค์€ ์•„๋ž˜์˜ ํƒ€์ž…๊ณผ ๊ณต์‹ ๋ฌธ์„œ (opens new window)๋ฅผ ์ฐธ์กฐํ•ด ์ฃผ์„ธ์š”.

axios-options

# ํ—ฌํผ ๋ฉ”์„œ๋“œ

$axios์˜ ๊ธฐ๋ณธ URL, ํ—ค๋”, ํ† ํฐ, ์ธํ„ฐ์…‰ํ„ฐ๋ฅผ ์„ค์ •ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋„ค ์ข…๋ฅ˜์˜ ํ—ฌํผ ๋ฉ”์„œ๋“œ๊ฐ€ ์ œ๊ณต๋ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ์„น์…˜์—์„œ๋Š” ๊ธฐ๋ณธ URL, ํ—ค๋”, ํ† ํฐ์„ ์„ค์ •ํ•˜๋Š” ๋ฉ”์„œ๋“œ๋งŒ ๋‹ค๋ฃจ๊ณ  ์ธํ„ฐ์…‰ํ„ฐ ๊ด€๋ จ ๋ฉ”์„œ๋“œ๋Š” ํ”Œ๋Ÿฌ๊ทธ์ธ ์„น์…˜์˜ ์ธํ„ฐ์…‰ํ„ฐ ์ถ”๊ฐ€ํ•˜๊ธฐ์—์„œ ๋‹ค๋ค„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

# setBaseURL

$axios์˜ ๊ธฐ๋ณธ URL์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

// ํด๋ผ์ด์–ธํŠธ, ์„œ๋ฒ„ ๋ชจ๋‘์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋ณธ URL ์„ค์ •
$axios.setBaseURL("http://api.example.com");

// ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋ณธ URL ์„ค์ •
if (process.client) {
  $axios.setBaseURL("http://api.example.com");
}

// ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋ณธ URL ์„ค์ •
if (process.server) {
  $axios.setBaseURL("http://api.example.com");
}

# setHeader

$axios์˜ ์š”์ฒญ ํ—ค๋”๋ฅผ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

// $axios๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ๋งˆ๋‹ค ํ—ค๋”์— 'Authorizaion : 123'์ด ๋“ฑ๋ก๋จ
$axios.setHeader("Authorization", "123");

// 'Authorization' ํ—ค๋”์— ์ƒˆ๋กœ์šด ๊ฐ’ ๋ฎ์–ด์“ฐ๊ธฐ
$axios.setHeader("Authorization", "456");

# setToken

$axios์˜ ์š”์ฒญ ํ—ค๋”์ธ Authorization ๊ฐ’์„ ์„ค์ •ํ•ฉ๋‹ˆ๋‹ค.

// $axios๋กœ ์š”์ฒญ์„ ๋ณด๋‚ผ ๋•Œ๋งˆ๋‹ค ํ—ค๋”์— 'Authorizaion : 123'์ด ๋“ฑ๋ก๋จ, ์ƒˆ๋กœ์šด ๊ฐ’์œผ๋กœ ๋ฎ์–ด์“ฐ๊ธฐ๋„ ๊ฐ€๋Šฅ
$axios.setToken("123");

// ํ† ํฐ์˜ ์ธ์ฆ ์Šคํ‚ด ์ง€์ • ๊ฐ€๋Šฅ, 'Authorization : Bearer 123'์ด ๋“ฑ๋ก๋จ
$axios.setToken("123", "Bearer");

// ํ† ํฐ์„ ์ฒจ๋ถ€ํ•  ์š”์ฒญ ๋ฉ”์„œ๋“œ ์„ ํƒ ๊ฐ€๋Šฅ, post, put, delete ์š”์ฒญ์„ ๋ณด๋‚ผ ๊ฒฝ์šฐ๋งŒ ํ—ค๋”์— 'Authorization : Bearer 123'์ด ๋“ฑ๋ก๋จ
$axios.setToken("123", "Bearer", ["post", "put", "delete"]);

WARNING

$axios์˜ ์„ค์ •์„ ๋ฐ”๊ฟ€ ๊ฒฝ์šฐ ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ์ ์šฉ๋˜๋ฏ€๋กœ ์˜๋„์น˜ ์•Š์€ ๋™์ž‘์„ ๋ง‰๊ธฐ ์œ„ํ•ด ํ—ฌํผ ๋ฉ”์„œ๋“œ๋ฅผ ์ปดํฌ๋„ŒํŠธ์—์„œ ํ™œ์šฉํ•˜๊ธฐ๋ณด๋‹จ ํ”Œ๋Ÿฌ๊ทธ์ธ์—์„œ ํ™œ์šฉํ•˜๋Š” ๊ฒƒ์„ ์ถ”์ฒœํ•ฉ๋‹ˆ๋‹ค.

# ํ”Œ๋Ÿฌ๊ทธ์ธ

ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด $axios์˜ ํ—ฌํผ ๋ฉ”์„œ๋“œ๋กœ ์„ค์ •์„ ์ถ”๊ฐ€/๋ณ€๊ฒฝํ•˜๊ฑฐ๋‚˜, ์ƒˆ๋กœ์šด ์—‘์‹œ์˜ค์Šค ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•ด์„œ Nuxt์— ์ฃผ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. Nuxt์˜ ๋“ฑ๋ก๋œ $axios๋ฅผ ํ™œ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” Nuxt ์„ค์ • ํŒŒ์ผ์˜ plugins ์†์„ฑ์— $axios๋ฅผ ์กฐ์ž‘ํ•  ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ํŒŒ์ผ์„ ๋“ฑ๋กํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

# ์„ค์ • ๋ณ€๊ฒฝํ•˜๊ธฐ(overwrite)

์ฐธ๊ณ ๋กœ $axios๋Š” ์˜ต์…˜์— ๋ช…์‹œํ•œ ์„ค์ •์ด ์ด๋ฏธ ์ ์šฉ๋œ ์ƒํƒœ์ด๊ณ  ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ๊ธฐ์กด์˜ ์„ค์ •์„ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ๊ทธ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

// nuxt.config.js
export default {
  plugins: ["@/plugins/api"],
  axios: {
    baseURL: "http://localhost:5000",
  },

  publicRuntimeConfig: {
    axios: {
      browserBaseURL: "http://localhost:4000",
    },
  },

  privateRuntimeConfig: {
    axios: {
      baseURL: "http://localhost:3000",
    },
  },
};
// plugins/api.js
export default function({ $axios }) {
  if (process.server) {
    $axios.setBaseURL("http://localhost:8000");
  }
  if (process.client) {
    $axios.setBaseURL("http://localhost:9000");
  }
}

์˜ต์…˜์œผ๋กœ ๊ธฐ๋ณธ URL์„ ์„ค์ •ํ•˜๋”๋ผ๋„ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค. ์œ„์˜ ์˜ˆ์‹œ์—์„œ๋Š” ์ตœ์ข…์ ์œผ๋กœ ํด๋ผ์ด์–ธํŠธ ์‚ฌ์ด๋“œ์—์„œ $axios์˜ ๊ธฐ๋ณธ URL์€ ํฌํŠธ 8000๋ฒˆ์ด ๋˜๊ณ  ์„œ๋ฒ„ ์‚ฌ์ด๋“œ์—์„œ๋Š” ํฌํŠธ 9000๋ฒˆ์ด ๋ฉ๋‹ˆ๋‹ค.

# ์ธํ„ฐ์…‰ํ„ฐ ์ถ”๊ฐ€ํ•˜๊ธฐ

๋น„๋™๊ธฐ ๋ฐ์ดํ„ฐ ํ†ต์‹  ๊ณผ์ •์—์„œ ์š”์ฒญ ๋ฐœ์ƒ, ์‘๋‹ต ์ˆ˜์‹  ๋“ฑ์— ๋ฐ˜์‘ํ•˜์—ฌ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ์ธํ„ฐ์…‰ํ„ฐ๋ฅผ ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ์ธํ„ฐ์…‰ํ„ฐ์— ์‚ฌ์šฉ๋  ์ˆ˜ ์žˆ๋Š” ํ—ฌํผ ๋ฉ”์„œ๋“œ๋“ค์˜ ์˜ˆ์ž…๋‹ˆ๋‹ค. ํ—ฌํผ ๋ฉ”์„œ๋“œ๋“ค์— ํ•จ์ˆ˜๋ฅผ ๋“ฑ๋กํ•ด๋‘๋ฉด ํŠน์ • ์ƒํ™ฉ ๋ฐœ์ƒ ์‹œ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.

  • onRequest(config => {...}) : ์š”์ฒญ์ด ๋ฐœ์ƒํ•˜๋ฉด ํ•จ์ˆ˜ ํ˜ธ์ถœ
  • onResponse(response => {...}) : ์‘๋‹ต์„ ์ˆ˜์‹ ํ•˜๋ฉด ํ•จ์ˆ˜ ํ˜ธ์ถœ
  • onError(error => {...}) : ์š”์ฒญ/์‘๋‹ต ์ƒ๊ด€์—†์ด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ํ•จ์ˆ˜ ํ˜ธ์ถœ
  • onRequestError(error => {...}) : ์š”์ฒญ ์‹คํŒจ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ํ•จ์ˆ˜ ํ˜ธ์ถœ
  • onResponseError(error => {...}) : ์‘๋‹ต ์‹คํŒจ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ํ•จ์ˆ˜ ํ˜ธ์ถœ

์•„๋ž˜๋Š” ์ธํ„ฐ์…‰ํ„ฐ ์ถ”๊ฐ€ ์˜ˆ์‹œ์ž…๋‹ˆ๋‹ค.

// plugins/api.js
export default function({ $axios, redirect }) {
  $axios.onRequest((config) => {
    console.log("Making request to " + config.url); // ์š”์ฒญ ๋•Œ๋งˆ๋‹ค url ์ถœ๋ ฅ
  });

  $axios.onError((error) => {
    const code = parseInt(error.response && error.response.status);
    if (code === 400) {
      redirect("/400"); // 400 ์—๋Ÿฌ ๋ฐœ์ƒ์‹œ /400์œผ๋กœ ๋ฆฌ๋‹ค์ด๋ ‰ํŠธ
    }
  });
}

# ์ปค์Šคํ…€ axios ์ธ์Šคํ„ด์Šค ์ฃผ์ž…

์—‘์‹œ์˜ค์Šค ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒˆ๋กœ ์ƒ์„ฑํ•ด์„œ $axios์ฒ˜๋Ÿผ context๋‚˜ VueComponent ์ธ์Šคํ„ด์Šค์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋„๋ก ์—‘์‹œ์˜ค์Šค ์ธ์Šคํ„ด์Šค๋ฅผ ์ฃผ์ž…ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

// plugins/api.js
export default function({ $axios }, inject) {
  // ์ƒˆ๋กœ์šด ์—‘์‹œ์˜ค์Šค ์ธ์Šคํ„ด์Šค ์ƒ์„ฑ
  const api = $axios.create({
    headers: {
      common: {
        Accept: "text/plain, */*",
      },
    },
  });

  // ์ธ์Šคํ„ด์Šค์˜ ๊ธฐ๋ณธ URL ๋ณ€๊ฒฝ
  api.setBaseURL("https://my_api.com");

  // context์— ์ฃผ์ž…, $api ํ˜•ํƒœ๋กœ ํ˜ธ์ถœ ๊ฐ€๋Šฅ
  inject("api", api);
}

์œ„์™€ ๊ฐ™์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•ด $api๋ฅผ ์ฃผ์ž…ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ด์ง‘๋‹ˆ๋‹ค.

<script>
export default {
    async asyncData({ $api }){
        const { data } = await $api.get(...);
        ...
    },
    async fetch(){
        const { data } = await this.$api.get(...);
        ...
    },
}
</script>

# ์ฐธ๊ณ  ์ž๋ฃŒ