관리 메뉴

Silver Library (Archived)

CORS policy issue 에 대한 고찰. 본문

Face the fear, build the future/Revision Sector

CORS policy issue 에 대한 고찰.

Ayin Kim 2022. 12. 6. 22:46
반응형

사실, 이 cors policy 에 대한 구성은 이전 글에서 다뤘었습니다.

당시 content-type 저건 언제 쓸까 하며 알아 보던 중, 알게 된 문제점입니다.

 

[react] 요즘 fetch Auth 구성에 대한 고찰.

코드를 계속 보다보니 느껴진 게, 대체 저건 뭘까? 였습니다. 언제부턴가 TS 와 비슷해지려는 느낌이 보이는 JS 코드들이 보이는데, 역시 2018년을 기점으로 권고안이 달라진 것을 볼 수가 있었습

silverlibrary.tistory.com

왜 표시 되나요?

CORS policy 를 위반해서 브라우저가 막고 있어서 그렇습니다.

 

보안 때문에 이러나요?

네, 그리 보입니다. 자세한 것은 아래를 참고해주세요. 이걸 비유한다면, 윈도우의 UAC 와 유사하다고 보여집니다.

"추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제입니다."

 

교차 출처 리소스 공유 (CORS) - HTTP | MDN

교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라

developer.mozilla.org

 

해결 방법은?

에러 메세지에서 요구하는 부분을 충족 시켜야 합니다.

 

제 경우는 axios 로 fetch request 를 보내고 나서 표시가 되었습니다.

 

해결방법 1. node.js 에 미들웨어 CORS 를 추가 해서 해결하는 방법.

 

React.js CORS 크로스 도메인 이슈

axios 를 활용하여 클라이언트 개발을 진행하려다가 CORS 이슈가 발생해서 증상을 살펴보았습니다. CORS(Cross Origin Resource Sharing) : 도메인 또는 포트가 다른 서버의 자원을 요청하는 매커니즘. 이 때

abbo.tistory.com

 

해결방법 2. 'Access-Control-Allow-Origin' 라는 response header 추가

getExample = async (id, anime) => {
	const { title } = await axios(`http://localhost:3000/v4/animeapi/anidb`,
    	(req, res) => {
        	(...중략)
            res.header("Access-Control-Allow-Origin", "*")
            res.send(data)
        }
    )
}

보충설명. (주의 : 예시 속 react 코드는 현재 버전과 맞지 않음)

 

ReactJS CORS Options - GeeksforGeeks

A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.

www.geeksforgeeks.org