vue, Proxy를 이용한 CORS 우회

사이드 프로젝트로 쇼핑몰의 껍데기만 만들어 보던중 상품이 없기에는 허전하고 하나하나 만들기는 거의 불가능 하니 쇼핑몰 API를 이용하여 상품정보를 받아오기로 했다.
이전 프로젝트를 할때 주소 조회를 해줄 Open API를 사용하려다가 CORS문제를 해결하지 못하고 결국 다른 방법으로 해결했던 기억이 있었기 때문에 지레 겁을 먹었지만 바닐라JS를 사용했던 그때와 달리 vue를 사용하고 있었기에 손쉽게 우회가 가능했다.

최상단 디렉토리에 vue.config.js를 생성

Proxy 작성

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  devServer: {
    proxy: {
      "/": {
        'target': "open api 주소중 일부",
        'pathRewrite': { "^/": "" },
        'ws': false,
      },
    },
  },
});

devserver 내에 proxy를 작성, target에 들어가는 부분이 api를 요청할 url의 일부가 들어간다. 그 후 ajax든 XMLHttpRequest든 요청을 보낼 url에는 target에 들어간 부분을 제외하고 입력하면 된다.
ws 는 WebSocket관련한 것 같은데 사용하지 않고, 지속적으로 오류가 떠 false 로 넣어주었다.