🏳‍🌈Proxy 세팅

🚤 기술 스택 : Ionic + Angular

🚑 프록시를 쓰는이유?

브라우저에 SOP정책에 따라 출처가 서로 다를 경우 SOP정책에 위반된다. 즉 A사이트에서 B사이트에 API를 요청하게 된다면 기본적으로는 SOP정책에 위반된다는 것이다.

 

🚗 Proxy 환경세팅

일단 루트 폴더에 proxy.conf.json 파일을 만들어준다. 아래 사진처럼 파일을 만들어준다.

proxy.conf.json

다음으로 proxy.conf.json에 아래 내용을 채워준다.

{
    "/api/*": {
      "target": "http://백엔드주소:3000",
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
    }
}

 

🏬 proxy.conf.json을 angular.json에 연결

angular.json에서 아래 그림처럼 작성해준다.

angular.json

아래는 복사를 하기위한 코드이다.

"serve": {
  "builder": "@angular-devkit/build-angular:dev-server",
  "options": {
    "browserTarget": "app:build",
    "proxyConfig": "proxy.conf.json" // 여기추가
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production",
      "proxyConfig": "proxy.conf.json" // 여기추가
    },
    "ci": {
      "progress": false
    }
  }
},

다음과 같이 하면 연결이 되는것을 확인 할 수 있었다.

다만 Android에서는 확인이 되지 않았다.