CORS란?
cors(Cross-Origin Resource Sharing)은 교차 출처 리소스 공유라고 번역이 되며,
브라우저에서 다른 출처의 리소스를 공유하는 방법이다.
브라우저에서는 보안상의 이유로 cross-origin HTTP 요청들을 제한한다.
그래서 cross-origin 요청을 하려면 서버의 동의가 필요하다.
(만일 동의하지 않는다면 아래와 같은 에러를 발생시키며 브라우저에서 거절한다.)
cross-origin?
cross-origin이란 다음 중 한 가지라도 다른 경우를 말한다.
1. 프로토콜 - http와 https는 프로토콜이 다르다.
2. 도메인 - domain.com과 other-domain.com은 다르다.
3. 포트 번호 - 8080포트와 3000포트는 다르다.
CORS 에러 해결 방법
1. 프록시 서버 설정
프론트엔드와 백엔드 사이에 프록시 서버를 두는 방법으로 CORS를 해결할 수 있다.
이는 다른 방법과 달리 프론트엔드에서 해결할 수 있는 방법이며, SPA 프레임워크(Angular, Vue...)와 같은 경우는 해당 라이브러리에 proxy설정하는 방법에대한 가이드가 다 있으니 인터넷 검색을 통해 레퍼런스를 참고하도록 하자.
예시) Vue에서 proxy 설정하는법
프로젝트 최상의 폴더에 vue.config.js파일을 만든 후, 아래와 같은 내용을 넣어준다.
module.exports = {
devServer: {
proxy: {
'/':{ // 적용할 경로. '/'를 적용하면 모든 url에 적용된다.
"target":'도메인 URL',
"changeOrigin":true
}
}
}
}
2. Jsonp
JSONP(JSON with Padding)는 <script>내의 참조는 외부 출처 리소스를 가져올 수 있다는 특징을 사용하는 방법이다.
아래 코드와 같은 방법으로 사용할 수 있다.
// Backend
router.get('/cors', (req, res, next) => {
res.send(`${req.query.callback}('bumday')`) # "bumday" 라는 값 전달
})<!-- Frontend -->
<!DOCTYPE html>
<html>
<script>
function jsonpFn (data) {
console.log(data) // 출력 -> "bumday"
}
</script>
<script
type="application/javascript"
src="http://localhost:3001/cors?callback=jsonpFn"
>
</script>
</html>
3. 서버 설정
아래 예시는 nodejs 서버에서 해결하는 방법이다.
(1) Access-Control-Allow-Origin 응답(response) 헤더를 추가.
app.get('/', (req,res) => {
res.header("Access-Control-Allow-Origin", "*");
...
}
(2) 미들웨어 CORS 추가
npm install corscors를 설치한 다음에 app.js에 다음을 추가해준다.
const cors = require('cors');
app.use(cors());
만약, 특정 URL만 허용하고 싶다면 다음과 같이 options을 추가해주면 된다.
const cors = require('cors');
const corsOptions = {
origin: "http://localhost:3000",
credentials: true
}
app.use(cors(corsOptions));
#References
https://beomy.github.io/tech/browser/cors/
[Browser] CORS란?
이번 포스트에서는 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)에 대해 이야기해보도록 하겠습니다. 아래 사진과 같은 에러를 보신 적이 있으셨을 수도 있습니다.
beomy.github.io
https://velog.io/@pilyeooong/CORS%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80
CORS란 무엇인가 ?
도메인 또는 포트가 다른 서버의 자원을 요청하는 메커니즘 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출
velog.io
https://firework-ham.tistory.com/70
[node] CORS란? CORS 문제 해결하기
로컬에서 프런트 서버와 백엔드 서버의 포트를 다르게 사용할 때 발생하는 문제인 CORS 해결방법에 대해 정리합니다. 1. CORS CORS는 Cross Origin Resource Sharing의 약자로 도메인 및 포트가 다른 서버로
firework-ham.tistory.com
'Network > Data communication' 카테고리의 다른 글
| UTC(협정 세계시)에 대해 & 지역마다 다른 시간값의 대처 (0) | 2023.05.14 |
|---|---|
| P2P와 P2MP의 차이 (1) | 2022.08.03 |
| 직렬화(Serialization)에 대해 (0) | 2022.06.17 |
| Serial 통신 한글깨짐 문제(Encoding 처리) (0) | 2022.04.17 |
| HTTPS와 SSL/TLS의 의미 및 차이점 (0) | 2021.12.15 |