개발자
Async await fetch 오류
const Content: React.FC = () => { const [htmlContent, setHtmlContent] = useState<string>(''); const data = { "filePath": ""https://cdn-image-dev.test.io/dev/contents/terms/2023/10/11/",", "fileName": "test.html" } const url = `${data.filePath}${data.fileName}`; // HTML 파일 가져오기 const fetchHtmlFile = async () => { try { const res = await fetch(url); console.log('res', res); if (res.ok) { const html = await res.text(); setHtmlContent(html); } else { console.error('Failed to fetch HTML file'); } } catch (error) { console.error('Error fetching HTML file:', error); } }; fetchHtmlFile(); return( <div dangerouslySetInnerHTML={{ __html: htmlContent }} /> ) } fetchHtmlFile 호출 시켜 res에서 얻은 html소스를 가져와 htmlContent에 넣어야하는데 에러나네요,, **에러메세지 Content.tsx:30 Error fetching HTML file: TypeError: Failed to fetch Cors 오류 참고 -- api url : https://api-dev.test.io/api/test/v1/~~ 도와주세요!
답변 1
https://medium.com/@sunyi233/%EC%9B%B9%EC%9D%84-%EC%9C%84%ED%95%9C-api%EC%9D%98-cors-%EC%84%A4%EC%A0%95-195c9c8d8f9c
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 10월 12일
해당 오류는 보통 CORS(Cross-Origin Resource Sharing) 에러 때문에 발생합니다. 요청을 보내는 클라이언트와 응답을 주는 서버가 다른 도메인에 있는 경우에 브라우저의 동일 출처 정책 때문에 정보를 제대로 가져오지 못하는 경우입니다. 이 문제를 해결하려면 서버에서 CORS 설정을 허용해줘야 하는데, 이게 불가능한 경우 프록시서버를 사용해서 요청을 중계해주는 방법이 있습니다. 그 외의 경우로는 fetch를 호출하는 `fetchHtmlFile()` 함수가 컴포넌트 내부에서 호출되어 반복적으로 실행되어 발생하는 문제일 수도 있습니다. React의 useEffect hook을 사용하여 componentDidMount에서 한번만 실행되도록 수정해볼 수 있습니다: ```jsx useEffect(() => { fetchHtmlFile(); }, []); ``` 위 코드조각은 컴포넌트 마운팅 후 딱 한 번만 `fetchHtmlFile`를 실행합니다. 그래서, 이 순간에 HTML 파일을 가져와서 상태에 저장하고, 이 상태를 기반으로 렌더링을 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!