[Java] 오픈api는 프론트에서 다 해서 백에서는 하는게 없을 줄..

로컬환경에서는 잘 나오던 네이버 뉴스 녀석들이 배포 후에 안나오기 시작함

(기존에는 프론트에서 해결해서 백에서는 할 게 없었음)

원래 뉴스가 나와야하는데 안 나오고 있음...

 

나의 친구 뤼튼에게 물어봤는데

서버에서 직접 API 요청을 처리하려면, 클라이언트가 서버에 요청을 보내고 서버가 그 요청을 받아 외부 API에 전달하는 방식으로 구현해야 합니다. 이렇게 하면 서버가 클라이언트와 외부 API 사이의 중개자 역할을 하게 됩니다.

따라서 백엔드 코드를 수정하여 네이버 뉴스 검색 API 호출 부분을 백엔드에서 처리하도록 변경해야 합니다. 그런 다음 프론트엔드는 백엔드 서버에 데이터를 요청하고, 백엔드 서버는 네이버 뉴스 검색 API를 호출하여 데이터를 가져온 후 프론트엔드에 반환하도록 해야 합니다.

맙소사..

오픈api는 프론트에서 다 하는 작업이라서 백에서는 따로 작업할 게 없을거라 예상했는데..!!!!

일반적으로 클라이언트(프론트엔드)에서 직접 외부 API를 호출하는 것은 보안상 좋지 않습니다. 특히 API 키와 같은 중요한 정보가 노출될 위험이 있기 때문입니다. 따라서 프론트엔드에서 백엔드로 요청을 보내고, 백엔드에서는 그 요청을 받아 외부 API에 전달하도록 하는 것이 일반적인 방식입니다. 이렇게 하면 서버가 클라이언트와 외부 API 사이의 중개자 역할을 하게 됩니다.
예를 들어, 네이버 뉴스 검색 API의 경우 다음과 같은 방식으로 작동하게 됩니다: 사용자가 웹사이트에서 검색어를 입력하고 검색 버튼을 클릭합니다. 프론트엔드는 이 검색어를 포함한 요청을 백엔드 서버로 보냅니다. 백엔드 서버는 이 요청을 받아 네이버 뉴스 검색 API를 호출합니다. 네이버 뉴스 검색 API는 결과 데이터를 백엔드 서버에 반환합니다. 백엔드 서버는 이 데이터를 프론트엔드로 반환합니다. 프론트엔드는 이 데이터를 사용하여 결과 페이지를 사용자에게 표시합니다. 위의 과정을 거치면서 중요한 정보(API 키 등)가 클라이언트 쪽으로 노출되지 않도록 할 수 있습니다.

또한, 이런 방식은 CORS 문제도 해결해 줍니다. 왜냐하면 실제로 크로스 도메인 요청은 백엔드에서 처리되며, 프론트엔드와 백엔드 사이의 요청은 동일 출처 정책에 따르기 때문입니다.

나에게 끊임없는 고통을 선물해주었던 CORS 문제 해결해주다니..!!!!!!!

이제부터 오픈api는 백에서 신청해야할듯...

 

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.PropertySource;
import org.springframework.http.HttpEntity;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

@RestController
@PropertySource("classpath:application-naver.properties")
public class NewsController {

	@Value("${naver.api.id}")
    private String naverApiId;

    @Value("${naver.api.secret}")
    private String naverApiSecret;

    @GetMapping("/news")
    public String getNews(@RequestParam String searchWord) {
        final String uri = "https://openapi.naver.com/v1/search/news.json?query=" + searchWord.trim() + "&display=100&sort=sim";

        HttpHeaders headers = new HttpHeaders();
        headers.add("X-Naver-Client-Id", naverApiId);
        headers.add("X-Naver-Client-Secret", naverApiSecret);

        HttpEntity<String> entity = new HttpEntity<>(headers);

        RestTemplate restTemplate = new RestTemplate();
        
        return restTemplate.exchange(uri, HttpMethod.GET, entity, String.class).getBody();
    }
}

결국 백에서 요청해서 프론트한테 전달해주는 방식으로 변경하였음

 

포스트맨으로 테스트해보면 정상적으로 정보 받아온당!!

포스트맨 한글깨져서 나오넴;;쩝;;;

 

 

기존의 프론트 코드도 수정해주면 뉴스 카테고리에서 정상적으로 작동되고 있는 것을 확인 할 수 있다^_^!

휴 다행히 한글 안 깨진당

 

 

 

 

오픈api 사용해서 프론트에 전달할 때 restTemplate을 사용하고 있당

다음번엔 이 부분을 집중적으로 공부해봐야겠당!!!