API React and Rest: как преодолеть ошибки CORS

Во второй части этой серии мы сделаем вызов API REST из нашего проекта React в услугу, в которой реализованы некоторые политики CORS. В этом конкретном примере мы сделаем вызовы API REST в API XKCD.

Что такое xkcd?

XKCD – это серия веб -комиксов, созданная американским автором Рэндаллом Манро. Вы можете найти потрясающие комиксы Здесь Анкет

xkcd имеет API?

Да, это действительно имеет API. Вы можете найти замечательные и краткие документы API Здесь Анкет

Что мы будем делать?

Мы сделаем призывы API REST одной из моих любимых комиксов, которые имеют удостоверение личности 327, то есть наша конечная точка будет https://xkcd.com/327/info.0.json . Это вернет данные JSON об этом конкретном комиксе.

Попробуем позвонить!

Хорошо, поэтому реализация должна быть довольно простой. Мы сделали наше вызов API REST в API Random User Generator в нашей предыдущей статье – нам просто нужно переключиться вокруг URL -адреса конечной точки, верно?

//const restEndpoint = "https://randomuser.me/api/";
const restEndpoint = "https://xkcd.com/327/info.0.json";

Хорошо, это было очень легко! Теперь давайте обновим нашу страницу React.

…? Доступ к Fetch в Blah Blah от Origin Bleh был заблокирован политикой CORS …. Скажи что теперь ???

Ну, похоже, ответ не отображался. И, кажется, в консоли много красного текста … _( ┐ 「ε:) _

Эта ошибка, которую мы видим в консоли, хорошо известна как Ошибка CORS . По сути, ресурсы, которые лежат в домене XKCD, не могут быть запрошены из другого домена (то есть наше приложение для реагирования переднего интерната).

Есть несколько способов преодолеть эту проблему:

Сделайте вызовы API REST из того же домена, что и XKCD
Отредактируйте настройки CORS сервера XKCD
Сделайте вызовы API REST с нашего собственного бэкэнд -сервера

Мы можем быстро испытать метод 1, если мы перейдем на любую страницу на XKCD и запустим следующий код в консоли.

fetch('https://xkcd.com/327/info.0.json')
  .then(response => response.json())
  .then(data => console.log(data));

Запрос API REST выполняется в том же домене, поэтому мы не сталкиваемся с ошибками CORS. Но маловероятно, что XKCD будет размещать наше приложение React на своем сайте для нас, так что это не реалистичный подход.

Метод 2 снова нереалистичен, поскольку у нас нет разрешения на доступ к настройкам сервера XKCD ¯ \ (ツ) /¯

Метод 3 достижим либо путем настройки собственного сервера и выполнения запросов из него, либо с использованием таких служб, как Zapier или Power Automate, чтобы сделать запросы для нас.

В этой статье мы продолжим с методом 3, настроив бэкэнд -сервер, используя Express, который будет действовать в качестве прокси, чтобы сделать вызовы API REST в XKCD.

Что такое экспресс?

Экспресс это средняя структура веб-приложений для узла.

Как мы будем использовать Express?

В этой статье мы рассматриваем Express как инструмент для создания пользовательских конечных точек, которые наше приложение React-end может позвонить. Когда мы делаем запросы на эти пользовательские конечные точки, Express Server сделает REST API вызовы в нашу желаемую конечную точку службы сторонних сторон, получите ответ, а затем отправьте ответ обратно в наше приложение React.

Если это было немного трудно понять, подумайте об этом, как заказ еду в хорошем ресторане. Если Мы (приложение для фронта) Перейдите прямо на кухню и закажите еду прямо на Шеф -повар (сторонняя служба) , нас ругают за плохие манеры (ошибки CORS) . Что нам нужно сделать, это заказать еду на сервер (приложение Express) . Сервер (Express App) Принять наш заказ, идти на кухню и попросить о еде в Шеф -повар (сторонняя служба) . Через некоторое время Шеф -повар (сторонняя служба) ответит, дав Сервер (Express App) Вернуть тарелку с едой. Сервер (Express App) затем переносит тарелку обратно к столу, так что это Мы (приложение для фронта) может поглотить это.

Установите экспресс

Итак, давайте продолжим, чтобы настроить Express. Это в основном новый проект узла с установленными экспресс -зависимостями. Мы хотим, чтобы этот проект находился в отдельном месте от нашего приложения React, так что давайте перейдем к нашему обратном пути к нашему myProject каталог, создайте новый каталог под названием Бэкэнд и перейдите в это. Поскольку терминал, который мы использовали, – это запуск приложения React, продолжайте использовать команды в новом окне терминала.

mkdir backend
cd backend

Отсюда мы будем следить за Экспресс -установка учебник Чтобы сделать наш экспресс -проект.

npm init

Вам будет задано несколько вопросов, но вы можете пропустить их, нажимая на Enter, пока он не закончится.

Продолжайте устанавливать некоторые зависимости.

npm install express node-fetch cors

Наконец, создайте файл JavaScript для работы – мы будем называть нашу Server.js Анкет

touch server.js

Настройка экспресс -кода

Мы будем использовать этот код для Server.js

const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');

const PORT = 5000;
const app = express();

app.use(cors());
const corsOptions = {
    origin: "http://localhost:3000"
};

const requestEndpoint = "https://xkcd.com/327/info.0.json";

// This function runs if the http://localhost:5000/getData endpoint
// is requested with a GET request
app.get('/getData', cors(corsOptions), async (req, res) => {
    const fetchOptions = {
        method: 'GET'
    }
    const response = await fetch(requestEndpoint, fetchOptions);
    const jsonResponse = await response.json();
    res.json(jsonResponse);
});

app.listen(PORT, () => {
    console.log(`Example app listening at http://localhost:${PORT}`);
});

Итак, давайте пройдемся через код.

Сначала мы установили наш порт на 5000, так как нам нужно, чтобы он был отдельно от порта, который мы используем в нашем приложении React Front-End React, которое было выполнено по умолчанию в порт 3000.

const PORT = 5000;

Экспресс обычно использует маршрутизация Это определяет, как конечные точки сервера будут реагировать на запросы нашего фронтального приложения React. В этом случае мы определили, как отреагирует сервер, когда конечная точка http://localhost: 5000/getData доступ к запросу GET.

app.get('/getData', cors(corsOptions), async (req, res) => {
  //...
});

Но по умолчанию наш Express Server вернет ошибки CORS, если он будет доступен из нашего фронтального приложения React, которое лежит на другом домене (порт). Настройка некоторых параметров CORS, мы разрешаем запросы из порта 3000 для доступа к нашим ресурсам, которые лежат на http://localhost: 5000/getdata .

app.use(cors());
const corsOptions = {
    origin: "http://localhost:3000"
};

app.get('/getData', cors(corsOptions), async (req, res) => {
  //...
});

Если бы мы могли получить доступ http://localhost: 5000/getData С помощью запроса GET из нашего приложения React Express запустит соответствующую функцию, которая в данном случае будет запросом на конечную точку API REST XKCD. Поскольку этот запрос сделан со стороны сервера, он не выполняется ни в каких ошибках CORS. Ответ от XKCD получен и возвращается обратно в наше приложение React через res.json () метод

const fetchOptions = {
    method: 'GET'
}
const response = await fetch(requestEndpoint, fetchOptions);
const jsonResponse = await response.json();
res.json(jsonResponse);

ОК, теперь это готово, давайте начнем запустить Express Server!

node server.js

Мы можем быстро увидеть, работает ли он успешно, получив доступ http://localhost: 5000/getData через браузер. Мы должны увидеть отображаемый ответ JSON.

Итак, похоже, что приложение Express делает успешные вызовы API REST в https://xkcd.com/327/info.0.json Анкет Обратите внимание, что если мы хотим внести какие -либо изменения в Server.js , мы должны перезапустить приложение, чтобы увидеть изменения.

Давайте оставим работу Express Server и вернемся к нашему коду React, чтобы он указывал на приложение Express, а не напрямую на сервер XKCD.

Обновите код React

Здесь нечего сделать, за исключением обновления нашей конечной точки REST до нашего Express Server вместо конечной точки XKCD.

// const restEndpoint = "https://xkcd.com/327/info.0.json";
const restEndpoint = "http://localhost:5000/getData";

Обновите браузер, и давайте посмотрим, удастся ли нам обойти ошибку CORS.

Большой! Ответ API REST успешно отобрался на наш HTML, и в нашей консоли нет ошибок CORS.

И с этим нам удалось успешно избежать ошибок CORS, чтобы сделать вызовы API REST в XKCD, используя наш Express Server в качестве прокси!

В следующей части серии мы сделаем вызов API REST в услугу веб -базы данных Kintone, которая бросит нам вызов на нашу следующую проблему.

                   _人人人人人人人人人_
                   > AUTHENTICATION <
                    ̄Y^Y^Y^Y^Y^Y^Y^Y ̄
                   (\__/) 
                   (•ㅅ•) 
                   /つ つ

Оригинал: “https://dev.to/will_yama/how-to-overcome-cors-errors-2nh9”