React 및 Express에서 Yelp-Fusion 라이브러리를 사용하는 방법(CORS 정책)

나는 최근에 식당을 전시하는 것과 관련된 개인 프로젝트를 진행하고 있었는데 YELP API은 확실히 선택할 수 있는 최고의 옵션 중 하나였습니다. 공식 문서 외에도 API 응답을 가지고 놀려고 할 때 이 문서post를 참조하고 Postman으로 끝점을 테스트하는 것이 좋습니다.

내 프로젝트는 큰 프로젝트가 아니므로 서버를 만들지 않고 클라이언트 측에서만 API를 가져오려고 했습니다. 추격을 시작하기 위해 주로 한 가지 이유로 잘 풀리지 않았습니다. CORS Policy .

일시적으로 CORS 정책을 피하고 클라이언트 측에서 가져오는 한 가지 방법은 heroku anywhere 을 사용하는 것이었지만 다음과 같은 이유로 API를 가져오는 안정적인 방법이 아니었습니다.

서버가 없으면 안정적이지 않습니다. 내 프로젝트의 백엔드에는 데이터베이스나 사용자 정보가 필요하지 않았지만 서버가 없으면 단순한 프런트엔드 템플릿이 될 수 있습니다.

herokuwhere가 그대로 지원된다면 서버가 없는 것이 바람직하지 않더라도 모든 것이 잘 되었을 것입니다. 그러나 heroku 팀은 여러 가지 이유로 heroku를 어디서나 사용을 제한하기로 결정했습니다. This link은 heroku 개발 팀이 어디에서나 heroku 사용을 제한하기로 결정한 이유에 대한 포괄적인 분석을 제공합니다. 따라서 프런트엔드 측에서 CORS 정책을 우회하는 유일한 방법은 내 프로젝트에서 어디에서나 heroku를 사용하는 것이었고 제한된 시간 동안만 액세스 권한을 부여하면 내 웹 페이지는 기본적으로 일정 시간이 지나면 쓸모가 없게 됩니다. 자세한 내용은 this github discussion을 참조하십시오.

마지막으로 서버가 복잡하지 않다면 구축하지 않겠습니까? 내가 해야 할 일은 내 클라이언트를 위한 API 끝점을 만드는 것이었고 이 끝점은 단순히 YELP API 비즈니스 끝점에서 비즈니스를 가져옵니다.

내 프로젝트를 위해 선택한 프레임워크는 클라이언트 측의 경우 React이고 서버 측의 경우 Express였습니다. 그렇게 간단합니다.

저는 간단한 Express 앱을 만드는 것부터 시작했습니다.

const express = require('express')
const app = express()
const port = 3001
const cors = require('cors');
const yelp = require('yelp-fusion');
const apiKey = 'YOUR-API-KEY';
const client = yelp.client(apiKey);

설명을 위해 yelp-fusion library 을 사용하고 있습니다.
CORS 정책을 피하기 위해 cors library을 설치했습니다.
이것은 내 package.json 파일입니다.

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "devStart": "nodemon app.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "cors": "^2.8.5",
        "express": "^4.18.1",
        "request": "^2.88.2",
        "yelp-fusion": "^3.0.0"
    },
    "devDependencies": {
        "nodemon": "^2.0.19"
    }
}

이제 cors 라이브러리를 사용하려면 앱에서 app.use() 함수를 호출하기만 하면 됩니다.

app.use(cors());

그런 다음 app.get()를 사용하여 API 엔드포인트를 생성하면 됩니다. 보기가 필요하지 않아서 send() 내 res로 결정했습니다.

app.get('/api', (req, res) => {
    client.search({
        location: 'PUT-ANY-LOCATION',
        // offset: '0',
        // limit: '50'
    }).then(response => {
        console.log(JSON.stringify(response.jsonBody));
        res.send(response.jsonBody.businesses);
    }).catch(e => {
        console.log(e);
    });
})

이 코드 스니펫은 이제 원하는 데이터를 서버로 보내야 합니다.
프런트엔드에서는 API 끝점에서 가져왔지만 데이터를 그대로 구문 분석해야 했습니다.

const fetchData = () => {
        fetch('YOUR-API-ENDPOINT')
        .then(response => response.json())
        .then(data => JSON.stringify(data))
        .then(stringifiedData => JSON.parse(stringifiedData))
        .then(parsedData => {
            setRestaurant(parsedData);
            setRestaurantName(parsedData[0].name)
        })
        .catch((error) => {
            console.log(error);
        });
    }

이거 야! 나는 웹 개발에 비교적 익숙하지 않았기 때문에 CORS 정책을 우회하는 방법을 찾기 위해 고군분투했으며 이것이 그렇게 하는 간단한 방법 중 하나였습니다. 이 기사가 webdev에 들어가 관련 문제로 어려움을 겪고 있는 사람들에게 도움이 되기를 바랍니다.

다른 제안도 대단히 감사하겠습니다.