티스토리 뷰
CORS (Corss-Origin Resource Sharing)
추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있도록 권한을 부여하도록 브라우저에 알려주는 체제이다.
웹 애플리케이션은 리소스가 자신의 출처 (도메인, 프로토콜, 포트) 와 다를 때 교차 출처 HTTP 요청을 실행한다.
두 개의 다른 포트를 가지고 있는 서버는 아무 설정없이 Request 를 보낼 수 없다.
WHY ? -> CORS 정책 때문에, 보안을 위해서
HOW TO SOLVE ? -> 여러 가지 방법이 있다.
- 동일한 출처 사용하기
- 서버쪽 해결 (response)
HTTP 응답헤더 Access-Control-Allow-Origin : * 혹은 Access-Control-Allow-Origin : 허용하고자 하는 도메인 설정해주기
express 에서는 이를 쉽게 해결해주는 미들웨어 제공
const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
- 클라이언트쪽 해결 (request)
리소스 요청하는 서버 사이에 Proxy Server 를 거쳐서 요청, 응답을 주고 받기
프록시 서버는 헤더를 추가하거나 요청을 허용/거부하는 역할을 중간에서 해줘서 Access-Control-Allow-Origin : * 의 헤더를 담아 응답해준다.
중간단계가 있기 때문에 속도가 느려지는 단점이 있다.
npm install http-proxy-middleware
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};
# Proxy Server
유저 <=> Proxy Server <=> 인터넷
1. 방화벽 기능
2. 웹 필터 기능
3. 캐쉬 데이터, 공유 데이터 제공 기능
※ 출처
developer.mozilla.org/ko/docs/Web/HTTP/CORS
create-react-app.dev/docs/proxying-api-requests-in-development/
'etc' 카테고리의 다른 글
docker, redis (0) | 2021.02.09 |
---|---|
mac 세팅 (0) | 2021.01.19 |
react-springboot 연동 (0) | 2021.01.16 |
wsl2 설치 (0) | 2021.01.14 |
git (0) | 2020.12.07 |
- Total
- Today
- Yesterday
- http
- dreamcoding
- 김영한 JPA
- 프로그래머스
- 백준
- 김영한 http
- ㅇㄷㅇㅈ
- 이펙티브자바 스터디
- js array
- 드림코딩
- 모던자바스크립트
- HTTP 완벽가이드
- 이펙티브자바 아이템60
- JS 딥다이브
- 가상 면접 사례로 배우는 대규모 시스템 설계 기초
- Spring Security
- 프로그래머스 SQL
- 이펙티브자바
- 백기선 스터디
- BOJ
- 이펙티브자바 아이템59
- 킹수빈닷컴
- GCP
- HTTP 완벽 가이드
- js api
- REST API
- js promise
- java
- JPA 연관관계 매핑
- 패스트캠퍼스 컴퓨터공학 완주반
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 |