React에서 CORS 정책 설정

[codetricity (Craig Oda)]

React로 Discourse API에 액세스하고 싶습니다.

다음과 같은 오류가 발생합니다:

localhost/:1 Access to XMLHttpRequest at 'https://community.oppkey.host/posts.json' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Discourse 관리자 패널에서 설정한 CORS 오리진 설정입니다.

Discourse 서버의 /var/discourse/containers/app.yml 파일에는 다음과 같은 내용이 있습니다.

Discourse API를 가져오기 위해 다음처럼 시도하고 있습니다.

export const DiscoursePanel = () => {
    const [ allData, updateData ] = useState([]);
	
	useEffect(() => {
         const apiEndPoint = 'https://community.oppkey.host/posts.json';
         /* const apiEndPoint = 'https://jsonplaceholder.typicode.com/posts'; */
        console.log("trying to get API on " + apiEndPoint);
		axios
        .get(apiEndPoint)
		.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("got api");
            console.log(currentData);
		})
		.catch((err) => console.log(err));
    }, []);

가짜 데이터를 제공하는 외부 서버를 사용하면 React 코드는 정상적으로 작동합니다.

일반적으로 CORS와 React가 어떻게 작동하는지 이해하지 못하고 있으므로, 도움이 필요합니다.

Discourse 서버에서 API 호출을 React에 연결하기 위해 사용하는 다른 REST API 서버로 중계하는 API 프록시 서버를 작성하여 작동하도록 만들었습니다. 작동하긴 하지만 속도가 느립니다. React에서 Discourse API 엔드포인트로 직접 API 호출을 보내고 싶습니다.

[gassim (Al-Gassim Sharaf Addin)]

안녕하세요 @codetricity

이 게시물에 대한 답변을 찾지 못해 죄송합니다. 저는 React fetch를 사용하며, 위에서 언급하신 단계와 유사한 단계를 거쳤지만 여전히 "CORS 정책"에 의해 차단되고 있습니다.

이 문제에 대한 해결책을 찾거나 해결법을 설명하는 자료가 있는지 확인해 주셨나요? 감사합니다!

[codetricity (Craig Oda)]

안녕하세요, 제가 결국 뭘 했는지 기억이 나지 않습니다. 하지만 방금 확인해 보니 React 사이트는 여전히 정상적으로 작동 중이며, 별도의 서버에서 Discourse의 데이터를 가져오고 있습니다.

React를 Discourse와 함께 사용하는 경우가 흔하므로, 다른 누군가가 답변해 줄 수 있을 것 같습니다. 해결 방법을 기억하지 못해 죄송합니다. 좋은 결과 있으시길 바랍니다.

[gassim (Al-Gassim Sharaf Addin)]

안녕하세요
빠른 답변 감사합니다!

@codetricity

.then((res) => {
			const currentData = res.data;
            updateData(currentData);
            console.log("got api");
            console.log(currentData);
		})

1분 정도 시간이 나시고 동일한 코드에 접근 권한이 있으시다면, 추가 헤더가 추가되었는지 확인해 주시겠어요? (민감한 정보 자체는 제외하고…)

위에 "No 'Access-Control-Allow-Origin' header is present"라고 나와 있어서 추가 헤더가 추가되었어야 하지 않을까 싶습니다?

미리 감사합니다!