Как использовать библиотеку Yelp-Fusion на React и Express (политика CORS)

Недавно я работал над личным проектом, который предполагал отображение ресторанов, и YELP API был определенно одним из лучших вариантов для выбора. Помимо официальной документации, когда вы пытаетесь играть с ответами API, я рекомендую вам обратиться к этому посту и протестировать конечные точки с помощью postman.

Мой проект не очень большой, поэтому я попытался обойтись без создания сервера и просто получить API только на стороне клиента. Короче говоря, это не сработало в основном по одной причине. Политика CORS.

Одним из способов временно обойти политику CORS и получать данные на стороне клиента было использование heroku anywhere, но это был нестабильный способ получения api по следующим причинам.

  1. Отсутствие сервера не является стабильным. Хотя бэкенд моего проекта не требовал ни базы данных, ни информации о пользователях, отсутствие сервера могло закончиться тем, что это был просто шаблон фронтенда.

  2. Все было бы хорошо, даже если бы отсутствие сервера не было предпочтительным, если бы heroku anywhere поддерживался в прежнем виде, но команда heroku решила ограничить использование heroku anywhere по различным причинам. По этой ссылке представлен полный анализ того, почему команда разработчиков heroku решила ограничить использование heroku anywhere. Таким образом, единственным способом обойти политику CORS на стороне frontend было использование heroku anywhere для моего проекта, и если они предоставят мне доступ только на ограниченное количество времени, моя веб-страница станет бесполезной через некоторое время. Для дополнительной справки, пожалуйста, посмотрите на это обсуждение на github.

  3. И последнее, но не менее важное: почему бы не создать сервер, если это несложно? Все, что мне нужно было сделать, это создать конечную точку 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.
Чтобы избежать политики CORS, я установил библиотеку cors.
Вот мой файл 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());
Вход в полноэкранный режим Выход из полноэкранного режима

После этого просто создайте конечную точку API с помощью app.get(). Мне не нужны были никакие представления, поэтому я решил 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, и это был один из простых способов сделать это. Я надеюсь, что эта статья поможет тем, кто только начинает заниматься веб-разработкой и испытывает трудности с какими-либо соответствующими вопросами.

Любые другие предложения также будут высоко оценены.

Оцените статью
devanswers.ru
Добавить комментарий