Как правильно получать данные из среднего API в Javascript

Похоже, вы добавляете в свой запрос правильный заголовок, который требуется для Medium API. Нам нужно правильно указать Access-Control-Allow-Origin в вашем заголовке, что разрешено Medium API. Поскольку мы не контролируем код Medium API. Есть несколько способов обойти это. Один из способов — создать собственный прокси-сервер на стороне сервера. Вы можете попробовать использовать Node JS или любой другой серверный язык для этого конкретного случая использования, а затем вызвать эту конечную точку из вашего клиентского приложения.

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

Я считаю, что браузер применяет политику одного и того же происхождения, которая предотвращает отправку запросов к другому домену, если целевой сервер явно не разрешает это, включая в ответ определенные заголовки CORS.

Я бы предложил вам использовать серверный скрипт для получения данных из Medium API. Таким образом, ваш JavaScript может взаимодействовать с вашим сервером (который имеет тот же источник), а затем ваш сервер может взаимодействовать с Medium API.

Например:

// Node.js Server-Side Code

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

app.get('/medium-data', async (req, res) => {
  const url = 'https://api.medium.com/v1/me';
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer 29f8128xxxx'
    }
  });
  const data = await response.json();
  res.json(data);
});

app.listen(3000, () => {
  console.info('Server running on port 3000');
});




// Client-Side JavaScript
    async function GetUsersData() {
 try {                
    const response = await fetch('http://localhost:3000/medium-data');
    const data = await response.json();
    console.info(data);
    alert(JSON.stringify(data));
  } catch (error) {
    alert(error);
  }
}

GetUsersData();

Чтобы обойти эту проблему, вы можете использовать прокси-сервер на стороне сервера для обработки запроса API. Таким образом, запрос выполняется между серверами, минуя ограничения CORS в браузере.

Использование прокси-сервера на стороне сервера Настройте прокси-сервер

Вот пример использования Node.js и Express:

// server.js
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/api/medium/me', async (req, res) => {
  try {
    const response = await fetch('https://api.medium.com/v1/me', {
      method: 'GET',
      headers: {
        'Authorization': 'Bearer 29f812842-xxxxxxxxxxx'
      }
    });
    const data = await response.json();
    res.json(data);
  } catch (error) {
    res.status(500).send(error.toString());
  }
});

app.listen(3000, () => console.info('Server running on port 3000'));

Обновите свой код внешнего интерфейса Измените свой JavaScript, чтобы вместо этого он отправлял запрос на ваш прокси-сервер:

async function GetUsersData() {
    try {
        const response = await fetch('/api/medium/me');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.info(data);
        alert(JSON.stringify(data));
    } catch (error) {
        alert('Error: ' + error.message);
    }
}
GetUsersData();

Использование прокси-сервера CORS (временное решение) Если вам нужно быстрое решение и вас устраивают потенциальные проблемы с безопасностью и надежностью, вы можете использовать прокси-сервис CORS, например cors-anywhere:

async function GetUsersData() {
    try {
        const response = await fetch('https://cors-anywhere.herokuapp.com/https://api.medium.com/v1/me', {
            method: 'GET',
            headers: {
                'Authorization': 'Bearer 29f812842-xxxxxxxxxxx'
            }
        });
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.info(data);
        alert(JSON.stringify(data));
    } catch (error) {
        alert('Error: ' + error.message);
    }
}
GetUsersData();

Для надежного и безопасного решения рекомендуется настроить прокси-сервер на стороне сервера. Прокси-сервер CORS можно использовать для быстрого тестирования, но он не идеален для производственных сред.