TD : review
오늘은 포스트맨 대신 사용할 수 있는 Axios와 서버 프로그램 간에 데이터를 요청할 때 생기는 문제점과 해결 방법 등을 배웠다.
또한 Apollo 서버를 이용하여 GraphQL-API를 작동하는 실습을 진행했다.
Axios
postman과 같이 HTML에서 백엔드 서버 프로그램에 데이터를 요청할 때 사용하는 라이브러리다.
- Axios 사용 방법
- 터미널에 yarn add axios 명령어로 설치
- HTML파일에 script태그 안에 아래 코드 추가
src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"> - axios.post(“브라우저 주소”, {req에 요청 값}).then((res) => {응답받은 res 값})
axios.get(“브라우저 주소”).then((res) => {응답받은 res 값})
SOP
SOP : same origin polish
같은 주소끼리만 데이터를 주고받을 수 있게 만든 정책, 포트 번호까지 같아야 한다.
CORS
서로 다른 주소끼리 데이터를 주고받을 수 있게 만든 정책이다.
백엔드 서버 프로그램에서 cors()로 추가해 준 데이터만 주고받을 수 있다.
데이터를 주고받을 사이트만 특정해 줄 수도 있다.
예시
cors({“daum.net”})
preflight
- CORS 에서 preflight 요청이란?
브라우저에서 서버 프로그램에 어떤 데이터를 어떤 방식으로 사용할 수 있는지 물어보는 것을 말한다.
(cors가 적용되어 있는지?? Post, get, delete, put...등 을 사용할 수 있는지?)
먼저 브라우저가 preflight로 백엔드 프로그램에 물어본 뒤 가능하면 그 이후에 데이터 요청한다.
preflight가 거절당하면 브라우저에서 먼저 데이터 전송을 차단한다. (서버 프로그램에서 차단하는 것이 아니다.)
- 막혀있는 백엔드 서버 접근 방법
CORS는 브라우저와 서버 프로그램끼리는 작동되지만 모바일이나 다른 백엔드 서버는 막지 않는다.
이를 응용하여 대신 받아와줄 백엔드 서버(프록시 서버: proxy server)를 생성하여 데이터를 받은 후에 브라우저에 연결한다.
백엔드 성장 기록