Как настроить запрос с локального хоста в React с использованием библиотеки Axios? 

Как настроить запрос с локального хоста на Google, чтобы избежать ошибки CORS? Я уже добавил заголовки CORS в запрос, но по-прежнему получаю ошибку. Вот мой код:

```javascript
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)
    }
  )
}
```

Приложение создано на локальном хосте, и я пытаюсь отправить запрос на API Google Books. Несмотря на то, что я добавил заголовки CORS, по-прежнему получаю ошибку. Ошибка гласит: "Запрос из постороннего источника заблокирован: Политика одного источника запрещает чтение удаленного ресурса на https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves&key=myKeyApi. (Причина: отсутствует заголовок CORS «Access-Control-Allow-Origin»). Код состояния: 404." Как решить эту проблему? Возможно, я делаю что-то не так с заголовками CORS?
  • 14 сентября 2023 г. 8:57
Ответы на вопрос 2 
Ошибка CORS возникает, когда браузер блокирует запросы, которые идут с одного источника (локальный хост) на другой (Google API), если сервер не отправляет заголовки CORS в ответ на запрос.

Проблема в вашем коде в следующей строке:

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

Вы неверно указали URL запроса. Вместо этого должен быть следующий формат:

```javascript
const books = axios.get('https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves?key=myKeyApi', { headers }).then(
```

Обратите внимание, что я удалил символ амперсанда (&) перед параметром `key=myKeyApi`. Также установил правильный ключ параметра `key`. 

Опять же, заголовки CORS, которые вы добавили, имеют смысл только на сервере Google API. Вам не нужно добавлять их в запрос из вашего локального хоста. Если сервер Google API не отправляет заголовки CORS, вам нужно использовать серверный прокси, чтобы обойти ограничения CORS. Вы можете настроить прокси на своем сервере, который будет перенаправлять запросы с вашего локального хоста на Google API. 

Ниже приведен пример кода для настройки прокси с использованием Express.js:

```javascript
const express = require('express');
const axios = require('axios');

const app = express();
const port = 3001;

app.use(express.json());

app.get('/books', (req, res) => {
  const url = 'https://www.googleapis.com/books/v1/users/1112223334445556677/bookshelves?key=myKeyApi';

  axios.get(url)
    .then(response => {
      res.json(response.data);
    })
    .catch(error => {
      console.error(error);
      res.status(500).json({ error: 'Failed to fetch books' });
    });
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});
```

Вы можете создать файл `server.js` с указанным выше кодом, установить Express.js с помощью команды `npm install express`, а затем запустить сервер с помощью команды `node server.js`. Теперь вы можете отправлять запросы на `http://localhost:3001/books` с вашего локального хоста, и прокси-сервер будет перенаправлять их на Google API, обходя ограничения CORS.

В вашем React-коде вы должны изменить URL запроса следующим образом:

```javascript
const books = axios.get('http://localhost:3001/books').then(
```
CORS заголовки нужно установить на сервере, к которому вы обращаетесь, а не на вашем клиенте. В данном случае, это сервер Google API. Чтобы обойти это ограничение, вы можете поднять свой локальный сервер, например, используя express.js, и использовать его в качестве прокси. Вот пример кода:

```javascript
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 вашего проекта:

```json
{
  "proxy": "https://www.googleapis.com"
}
```

Это позволит вашему клиентскому приложению отправлять запросы на сервер Google API через ваш локальный сервер или прокси.
Похожие вопросы
    Показать ещё