[Vue.js 프로젝트 투입 일주일 전] 10장 - Proxy 사용하기

10.1 프록시(proxy) 서버

  - 프록시 서버: 클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속 가능하게 해주는 응용 프로그램

    - 클라이언트와 서버 사이에서 HTTP 요청과 응답을 대신 처리해주는 역할을 하는 서버

10.2 CORS란

  - CORS: 웹 애플리케이션에서 도메인, 포트, 프로토콜이 다른 곳으로 HTTP 요청을 보낼 수 없도록

                  브라우저가 요청을 막는 보안 정책

10.3 CORS 해결방법

  - 서버에서 접근 허용

  - 프록시 서버 이용

10.4 Proxy 설정하기

  - Vue에서 proxy 설정하고 클라이언트에서 HTTP 요청 (포트: 8080)하면

     Proxy 서버가 웹 서버로 HTTP 요청 (포트: 3000)을 대신 함으로써 CORS 문제 해결

  - 운영 환경에서는 제대로 실행 안되므로 서버에서 처리 해야 함

10.5 서버에서 CORS 해결

  - 클라이언트 단 코드

// mixins.js
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'
axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8'
axios.defaults.headers.post['Access-Control-Allow-Origin']='*';

 

  - 서버 단 코드

// app.js
const cors = require('cors');

let corsOption = {
  origin: 'http://localhost:8080',
  credentials: true,
};

app.use(cors(corsOption));

---

[Source Code] Ch 10. Proxy 사용하기