Запрос Axios с заголовком не работает

Question

Я пытаюсь сделать запрос get с Axios на API, который требует ключа API в качестве заголовка, и я не уверен, что я делаю неправильно.Я получаю две ошибки в консоли.1: xhr.js: 178 ВАРИАНТОВ https://api.propublica.org/congress/v1 403 (Запрещено).2: Не удалось загрузить https://api.propublica.org/congress/v1: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».Происхождение 'http://localhost:3000' поэтому не допускается.Ответ имеет HTTP-код состояния 403. Я использую React - Спасибо за поиск

const API_KEY = "*******";
class List extends Component {
  state = {
    legislators: []
  }

  componentDidMount() {
    axios
      .get("https://api.propublica.org/congress/v1", {
        headers: { 'Authorization': API_KEY }
      })
      .then(data => console.log(data));
  }

Answer 1

Скорее всего, это проблема CORS.

Обмен ресурсами между источниками (CORS) - это механизм, который использует дополнительные заголовки HTTP, чтобы пользовательский агент мог получить разрешение на доступ к выбранным ресурсам с сервера.в другом источнике (домене), чем сайт, который используется в настоящее время.

Подробнее о CORS можно прочитать здесь .

Чтобы обойти CORS, вы можете использовать CORS повсеместной .Документация для которой предоставляется здесь

Заголовок должен быть предоставлен в формате X-API-Key: PROPUBLICA_API_KEY, а не 'Authorization': API_KEY (см. документы )