Как сделать запрос с локального хоста react axios?

Question

[Александр Иванов]

на локал хост создал реакт приложение и хочу отправить запрос с локалхоста на гугл выдается ошибка корс.

import React from 'react'
import axios from 'axios'
import BookItem from './BookItem'
import Filter from './Filter'

function Main() {
    const headers = {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        "Access-Control-Allow-Headers": "x-access-token, Origin, X-Requested-With, Content-Type, Accept"
    };

  const books = axios.get('https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves&key=myKeyApi', { headers }).then(
    (res) => {
        console.log(res)
    }
  )

даже с указанием хедеров выдается все равно ошибка корс

Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves&key=AIzaSyDQXKoMLUonjHZ5E6FWv0iBj02aITp_FoA. (Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»). Код состояния: 404. 3

Answer 1

[Михаил Р.]

CORS заголовки должны быть установлены на сервере, который отвечает на Ваш запрос (в данном случае, Google API), а не на Вашем клиенте. Это механизм безопасности браузеров, и заголовки CORS должны быть установлены на стороне сервера. Если сервер настроен так, чтобы не принимать запросы с Вашего домена или IP-адреса, то на клиенте (в Вашем React-приложении) эту проблему не решить.

Можно поднять свой локальный сервер, например на express.js и использовать его как прокси:

import express from 'express';
import cors from 'cors';
import axios from 'axios';

const app = express();

app.use(cors());

app.get('/getBooks', async (req, res) => {
  try {
    const result = await axios.get('https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves&key=myKeyApi');
    res.json(result.data);
  } catch (error) {
    console.error(error);
    res.status(500).send(error);
  }
});

app.listen(4000, () => {
  console.log('Proxy server running on http://localhost:4000');
});

Либо попробовать заюзать прокси на клиенте, указав его в package.json:
{"proxy": "https://www.googleapis.com"}

Comments

[Александр Иванов]

спасибо за помощь, в том и дело что не хотел делать свой локальный сервер, думал можно через axios на прямую

[Михаил Р.]

Александр Иванов, обновил ответ:

CORS заголовки должны быть установлены на сервере, который отвечает на Ваш запрос (в данном случае, Google API), а не на Вашем клиенте. Это механизм безопасности браузеров, и заголовки CORS должны быть установлены на стороне сервера. Если сервер настроен так, чтобы не принимать запросы с Вашего домена или IP-адреса, то на клиенте (в Вашем React-приложении) эту проблему не решить.

[Александр Иванов]

Михаил Р., я понял, еще раз спасибо!

[Михаил Р.]

Александр Иванов, не за что, но здесь принято выражать спасибо соответствующими кнопками под ответом

[Александр Иванов]

Михаил Р., однако через локальный сервер результат тот же

[Михаил Р.]

Александр Иванов, код сервера и клиента в студию