CORS 와 해결방법 (express, proxy) - 네트워크 study2

1. CORS란?

• 같은 주소, 같은 포트에 있는 리소스를 불러올 때는 문제가 없지만 다른 출처의 리소스를 요청하게 되면 보안적인 문제로 기본적으로 이를 차단함.

CORS (Cross Origin Resource Sharing) : HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘 (출처: MDN)

2. 해결방법

2-1. 동일한 출처를 사용하기 (원초적 해결)

애초에 cors 이슈 발생 x

2-2. 서버쪽 해결 (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())

기본적으로 origin : *이 설정됨.

2-3. 클라이언트쪽 해결 (request)

내가 서버헤더 설정할 수 있는 상황이 아니라면!!
리소스 요청하는 서버 사이에 프록시 서버를 하나 거쳐서 요청,응답을 주고 받기.

• 프록시 서버 : 브라우저와 서버를 통신하는 과정 중간에서 정보교환을 도와주는 중간 서버 ( 브라우저 - 프록시 서버 - 서버 )

프록시 서버는 헤더를 추가하거나 요청을 허용/거부하는 역할을 중간에서 해줘서 Access-Control-Allow-Origin : *의 헤더를 담아 응답해준다!

아무래도 중간단계가 있기 때문에 속도가 느려지는 단점이 있다.

const url_sample = "https://cors-anywhere.herokuapp.com/https://A.com")
// 크롤링 사이트들 만들며 사용한 프록시 서버