CORS policy issue 에 대한 고찰.

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

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

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

왜 표시 되나요?

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

 

보안 때문에 이러나요?

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

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

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

 

해결 방법은?

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

 

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

 

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

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

 

해결방법 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