[React] 네이버 도서 검색 API CORS Error 해결법

 

네이버 도서 검색 API를 사용하는 와중  아래와 같은 에러가 발생했다.

 

 

교차 출처 리소스 공유(Cross-Origin Resource Sharing,CORS)란?

CORS(교차 출처 리소스 공유) 에러는 웹 애플리케이션에서 발생하는 보안 관련 이슈이다. 이 에러는 다른 출처(origin)에서 온 리소스에 접근할 때 발생한다. 출처란 URL의 프로토콜, 호스트, 포트가 모두 같은 것을 의미한다. 예를 들어, http://example.com에서 http://example.com/api에 요청을 보내는 것은 같은 출처에 속하므로 문제가 되지 않는다. 하지만 http://example.com에서 http://api.example.com/api에 요청을 보내는 것은 다른 출처에 속하므로 보안 정책으로 인해 문제가 발생할 수 있다.
이 보안 정책은 브라우저에서 시행되며, 웹 애플리케이션이 다른 출처의 리소스에 접근할 때는 이를 명시적으로 허용해야 한다. 이를 위해 서버는 응답 헤더에 CORS 관련 정보를 포함시켜야 한다. 만약 서버가 이러한 정보를 포함하지 않거나, 브라우저가 이를 인식하지 못하면 CORS 에러가 발생한다.
간단히 말해서, CORS 에러는 다른 출처의 리소스에 접근할 때 보안 정책으로 인해 발생하는 문제이다.

 

 

기존에 작성한 코드는 다음과 같다.

function BookSearch() {
  const [query, setQuery] = useState('');
  const [books, setBooks] = useState([]);

  const searchBooks = async () => {
    try {
      const response = await axios.get(`https://openapi.naver.com/v1/search/book.json`, {
        headers: {
          'X-Naver-Client-Id': process.env.REACT_APP_NAVER_CLIENT_ID,
          'X-Naver-Client-Secret': process.env.REACT_APP_NAVER_CLIENT_SECRET
        },
        params: {
          query: query,
          display: 10 // 가져올 검색 결과의 수
          // 네이버 책 검색 API에 필요한 인증 헤더를 추가합니다.
        }
      });

      setBooks(response.data.items);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  const handleInputChange = (event) => {
    setQuery(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    searchBooks();
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input type="text" value={query} onChange={handleInputChange} />
        <button type="submit">Search</button>
      </form>
      <ul>
        {books.map((book, index) => (
          <li key={index}>
            <img src={book.image} alt={book.title} />
            <p>{book.title}</p>
            <p>{book.author}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default BookSearch;

 

 

해결한 방법은 다음과 같다.

 

1. http-proxy-middleware를 설치한다.

npm install http-proxy-middleware --save

 

2. src 폴더 아래에 setupProxy.js 파일을 생성한다

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app){

  app.use(
      createProxyMiddleware( '/naver-api', {
          target: 'https://openapi.naver.com',
          changeOrigin: true,
          // 하단 처리는 필수로 해주어야 한다. 아래의 내용이 없으면 url 경로에
          // api가 추가되어 경로를 찾을 수 없어진다.
          pathRewrite:{
            '^/naver-api/':'/'
          }
      })
  )
};

 

3. axios 변경

 const response = await axios.get(`/naver-api/v1/search/book.json`, {
        headers: {
          'X-Naver-Client-Id': process.env.REACT_APP_NAVER_CLIENT_ID,
          'X-Naver-Client-Secret': process.env.REACT_APP_NAVER_CLIENT_SECRET
        },
        params: {
          query: query,
          display: 10 // 가져올 검색 결과의 수
          // 네이버 책 검색 API에 필요한 인증 헤더를 추가합니다.
        }