일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- javascript
- it
- 프래그먼트
- caddy
- H2O
- 번역
- server
- Portfolio
- 컴퓨터과학총론
- 해석
- 안드로이드
- unity
- mariadb
- java
- 개발
- 자바
- centOS7
- php
- 개발자
- 한글
- android
- NGINX
- MySQL
- 구글
- kakao
- error
- ubuntu
- C lanuage
- C
- techEmpower
- Today
- Total
개발모음집
cors 문제 본문
cors란?
동일 출처 정책(same-origin policy) 때문에 CORS 같은 상황이 발생 하면 외부서버에 요청한 데이터를 브라우저에서 보안목적으로 차단합니다
출처 : https://velog.io/@wlsdud2194/cors
Cross-Origin Resource Sharing (CORS)은 추가 HTTP 헤더를 사용하여 브라우저가 한 출처에서 실행중인 웹 애플리케이션에 선택된 액세스 권한을 부여하도록하는 메커니즘입니다. 다른 출처의 자원. 웹 응용 프로그램은 자체와 다른 출처 (도메인, 프로토콜 또는 포트)를 가진 리소스를 요청할 때 cross-origin HTTP 요청을 실행합니다.
cross-origin request의 예: https://domain-a.com에서 제공되는 프론트 엔드 JavaScript 코드가 XMLHttpRequest를 사용하여 https://domain-b.com/data.json를 요청.
보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 cross-origin HTTP 요청을 제한합니다. 예를 들어, XMLHttpRequest and the Fetch API는 same-origin 정책을 따르기에, 즉, 다른 API의 응답에 올바른 CORS 헤더가 포함되어 있지 않으면 해당 API를 사용하는 웹 응용 프로그램은 응용 프로그램이로드 된 동일한 출처의 리소스 만 요청할 수 있습니다.
출처 : https://developer.mozilla.org/ko/docs/Web/HTTP/Access_control_CORS
그래서
클라이언트에서 서버쪽으로 데이터 전송을 할 때,
withCredentials: true,
설정을 하고 데이터를 같이 보내줘야한다.
서버쪽 코드
app.use(cors({
origin: 'http://localhost:7777',
credentials: true,
}));
'client' 카테고리의 다른 글
js reduce (0) | 2020.02.04 |
---|---|
apply eslint at window os (0) | 2020.02.03 |
js에서 html tag에 class name 추가하는 방법 (0) | 2019.12.27 |
array에 값넣을 때 조심해야할 점 (0) | 2019.12.26 |
how to get json value in javascript (0) | 2019.12.09 |