리액트 API 연동하여 호스팅을 하는데 API를 불러오지 못합니다.

Question

안녕하세요!프론트엔드 개발자 취업을 준비중인 취준생입니다.다름이 아니고, 뉴스사이트의 API를 연동하여 리액트에서 뉴스사이트를 구현하는 페이지를 제작하였습니다.그리고 포트폴리오용으로 깃허브에 호스팅을 하였고, API 연동이 되지 않았습니다.CORS 문제라는 게시글이 많아서 프록시 설정을 해보았습니다.yarn add http-proxy-middleware 설치setupProxy.js 파일 생성하여 프록시 설정을 해도 아래와 같은 에러가 발생하며 호스팅이 정상적으로 되지 않는데,혹시 해결방법 아시면 도와주시면 감사하겠습니다. Failed to load resource: the server responded with a status of 426 ()

apfhd1018 · Answer

이는 API를 불러온 컴포넌트이고,import React, { useState, useEffect } from "react"; import styled from "styled-components"; import NewsItem from "./NewsItem"; import axios from "axios"; const NewsListBlock = styled.div` display: inline-block; box-sizing: border-box; width: 70%; margin: 0 auto; margin-top: 2rem; @media screen and (max-width: 768px) { width: 100%; padding-left: 1rem; padding-right: 1rem; } `; const NewsList = ({ category }) => { const [articles, setArticles] = useState(null); const [loading, setLoading] = useState(false); //useEffect 한번으로 컴포넌트 맨 처음 렌더링, category 값이 바뀔 때 요청하도록 설정 가능 useEffect(() => { // async를 사용하는 함수 따로 선언 const fetchData = async () => { setLoading(true); try { //category 값이 all이면 query값을 공백, all이 아니 //면 $category=카테고리 형태의 문자열을 만듬 const query = category === "all" ? "" : `&category=${category}`; const response = await axios.get( `https://newsapi.org/v2/top-headlines?country=kr${query}&apiKey=0a8c4202385d4ec1bb93b7e277b3c51f` ); setArticles(response.data.articles); } catch (e) { console.log(e); } setLoading(false); }; fetchData(); }, [category]); //category이 바뀔때마다 뉴스를 새로 불러 //와야 하므로 useEffect의 의존 배열에 category 넣음 // 대기 중일 때 if (loading) { return 대기 중...; } // 아직 articles 값이 설정되지 않았을 때 if (!articles) { return null; } // articles 값이 유효할 때 return ( {articles.map((article) => ( ))} ); }; export default NewsList; 아래는 프록시 설정한 setupProxy.js 입니다. const { createProxyMiddleware } = require("http-proxy-middleware"); module.exports = function (app) { app.use( createProxyMiddleware( "/v2/top-headlines?country=kr${query}&apiKey=0a8c4202385d4ec1bb93b7e277b3c51f", { target: "https://newsapi.org", secure: false, changeOrigin: true, } ) ); };사진이 안올라가서 다시 올립니다! 로컬호스트 페이지 호스팅 페이지

리액트 API 연동하여 호스팅을 하는데 API를 불러오지 못합니다.

1개의 답변

#426 목록