코린이 401 에러 도와주세요....이렇게 오류나요..GET https://dapi.kakao.com/v2/search/web?query=%EA%B2%80%EC%83%89&sort=accuracy&page=1&size=10 401

REST API
, ,
1 
import axios from "axios";

const Kakao = axios.create({
    baseURL: "https://dapi.kakao.com", // 공통 요청 경로를 지정해준다.
    headers: {
        Authorization: "KakaoAK ${911791e381ad6686e6b**********}" // 공통으로 요청 할 헤더
    }
});

// search news api
export const newsSearch = params => {
    return Kakao.get("/v2/search/web", { params });
};

ncaught (in promise) AxiosError {message: ‘Request failed with status code 401’, name: ‘AxiosError’, code: ‘ERR_BAD_REQUEST’, config: {…}, request: XMLHttpRequest, …}
newsSearchHttpHandler @ NewsPage.jsx:43
await in newsSearchHttpHandler (async)
(anonymous) @ NewsPage.jsx:13
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
commitRootImpl @ react-dom.development.js:26935
commitRoot @ react-dom.development.js:26682
performSyncWorkOnRoot @ react-dom.development.js:26117
flushSyncCallbacks @ react-dom.development.js:12042
(anonymous) @ react-dom.development.js:25651

1개의 좋아요
2

Authorization 에 ${} 는 제거해주세요~

2개의 좋아요
3

감사합니다 이제 401은 사라졌는데…

아무 반응이 일어나지가 않습니다. ㅠ

import React from "react";
import styled from 'styled-components';

const NewsItem = props => {
return (
<ItemContainer>
    <ItemData>
        <Title>{props.title}</Title>
        <ItemContents>{props.contents}</ItemContents>
        <ItemUrl href={props.url}>링크 바로가기</ItemUrl>
        <ItemDatetime>{props.datetime}</ItemDatetime>
    </ItemData>
</ItemContainer>
);
};

export default NewsItem;

const ItemContainer = styled.div`
list-style-type: none;
border: 1px solid #dddddd;
padding: 3rem;
`;

const ItemData = styled.div`
display: flex;
flex-direction: column;
`;

const Title = styled.div`
font-size: 1rem;
`;

const ItemContents = styled.div`
`;

const ItemUrl = styled.div`
`;

const ItemDatetime = styled.div`
`;

import React, { useEffect, useState } from "react";
import { newsSearch } from "../components/News/Newsapi";
import NewsItem from "../components/News/NewsItem";
import styled from 'styled-components';

const NewsPage = props => {
  const [news, setNews] = useState([]);
  const [text, setText] = useState("");
  const [query, setQuery] = useState("");

  useEffect(() => {
    if (query.length > 0) {
      newsSearchHttpHandler(query, true);
    }
  }, [query]);

  // 엔터를 눌렀을 때 호출 되는 함수
  const onEnter = e => {
    if (e.keyCode === 13) {
      setQuery(text);
    }
  };

  // text 검색어가 바뀔 때 호출되는 함수.
  const onTextUpdate = e => {
    setText(e.target.value);
  };

  const newsSearchHttpHandler = async (query, reset) => {
    const params = {
      query, // 검색을 원하는 질의어
      sort: "accuracy", // 결과 문서 정렬 방식, accuracy(정확도순) 또는 recency(최신순), 기본 값 accuracy
      page: 1, // 결과 페이지 번호, 1~50 사이의 값, 기본 값 1
      size: 10 // 한 페이지에 보여질 문서 수, 1~50 사이의 값, 기본 값 10
    };

    const { data } = await newsSearch(params);
    if (reset) {
      setNews(data.documents);
    } else {
      setNews(news.concat(data.documents));
    }
  };

  return (
    <NewsContainer>
    <NewsAContainer>
      <NewsInput
        type="search"
        placeholder="검색어를 입력 하세요..."
        name="query"
        onKeyDown={onEnter} // enter
        onChange={onTextUpdate} // change
        value={text}/>
      </NewsAContainer>
      <NewsBContainer>
        {news.map((news, index) => (
          <NewsItem
          key={index}
          title={news.title}
          url={news.url}
          datetime={news.datetime}
        />
        ))}
      </NewsBContainer>
      </NewsContainer>
  );
};

export default NewsPage;
const NewsContainer = styled.div`
display: flex;
flex-direction: column;
align-items: center;
`;

const NewsAContainer= styled.div`
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 5rem;
`;
const NewsBContainer = styled.div`
  display: grid;
  padding: 4rem;
  width: 80rem;
  margin: auto;
  grid-gap: 1rem;
  grid-template-columns: repeat(1, 1fr);
`;

const NewsInput = styled.input`
margin-top: 4rem;
font-size: 3rem;
border: 0;
border-bottom: 1px solid #dddddd;
width: 40rem;
padding: 3px;
display: block;
transition: border 0.3s;
`;

무엇이 문제 일까요…?

4

재현할 수 있는 URL과 앱ID알려주시겠어요?

1개의 좋아요
5

잘 몰라서 그러는데 어떤걸 드리면 될까요…?

6

앱ID
https://developers.kakao.com/ 의 내 애플리케이션>앱 설정>요약 정보 : 기본정보에 있는 앱 ID
숫자로된 ID 입니다~
ex) 123456

2개의 좋아요
7

아 감사합니다

앱 ID 869044 입니다.

2개의 좋아요