http-proxy-middleware를 사용하여 더미 API 준비

서버 측에서 API가 제공되지 않기 때문에 API 연동이 불가능합니다 ...
http-proxy-middleware은 더미 API를 제공합니다.

Nuxt.js 사용

스텁 준비

public 느낌으로 액세스 할 수있는 곳에 스텁 JSON을 준비합니다.
Nuxt.js이므로 static/stubs/로 준비합니다.

static/stubs/user.json

[
  {
    "id": 1,
    "name": "ROU"
  },
  {
    "id": 2,
    "name": "TK"
  },
  {
    "id": 3,
    "name": "JG"
  },
  {
    "id": 4,
    "name": "KNSRU"
  }
]

이것으로 우선 어디서나? 액세스할 수 있는 JSON이 제공되었습니다.

http-proxy-middleware 설정

API로 액세스하려는 URL은 대개/api/user/입니다.
그리고 실제로 전달하고 싶은 것은 static/stubs/user.json의 응답입니다.
이렇게 액세스할 수 있도록 설정합니다.
nuxt.config.js 입니다만 webpack.config.js 등에서도 그렇게 변하지 않을 것입니다 ...

nuxt.config.js

const config = {
  ・・・
  proxy: {
    '/api/user': {
      target: 'http://localhost:3000/stubs',
      pathRewrite: {
        // /api/user/～ -> http://localhost:3000/static/stubs/user.json
        '^/api/user/': 'user.json',
      },
    },
  },
  ・・・
};
export default config;

실제로 GET 해보자

실제로 axios 등으로 취득해 보겠습니다.

pages/index.vue

  mounted() {
    this.$axios.get('/api/user/').then(response => {
      console.log(response);
    });
  },

결과...



4명의 사용자 정보가 검색되었습니다.
어땠습니까? 어땠습니까?