Как можно исправить проблему "has been blocked by CORS policy"?

Как получить доступ к полному тексту книги через API Gutendex без ошибки CORS? Может быть существует другой API для получения полных текстов книг? Вот часть кода запроса данных с Gutendex API: <pre><code class="javascript">let { data: book } = await useFetch(`https://gutendex.com/books/5316`)
book = book._rawValue
const book_text_request = book.formats['text/html']
const { book_text } = await useFetch(book_text_request);</code></pre>
  • 6 августа 2024 г. 12:23
Ответы на вопрос 2
Для исправления проблемы "has been blocked by CORS policy" при обращении к Gutendex API, можно использовать следующие способы:

1. Перенаправить запрос через прокси-сервер, который может обойти политику CORS. Например, можно использовать сервисы типа CORS Anywhere или создать свой собственный прокси-сервер.

2. Настроить сервер API для разрешения запросов с вашего домена. Это требует изменений на стороне сервера, чтобы отправлять заголовок Access-Control-Allow-Origin со значением вашего домена.

3. Переключиться на другой API для получения полных текстов книг, который не имеет ограничений по политике CORS.

Чтобы получить доступ к полному тексту книги через API Gutendex без ошибки CORS, можно попробовать вариант с использованием прокси-сервера. Ниже приведен пример кода, как можно изменить ваш запрос:

```
const proxyUrl = 'https://cors-anywhere.herokuapp.com/';
const apiUrl = `https://gutendex.com/books/5316`;

let { data: book } = await useFetch(`${proxyUrl}${apiUrl}`);
book = book._rawValue;
const book_text_request = book.formats['text/html'];
const { book_text } = await useFetch(`${proxyUrl}${book_text_request}`);
```

Этот код отправляет запрос через прокси-сервер, который добавит заголовки CORS, чтобы обойти ошибку. Помните, что использование внешнего прокси-сервера может повлиять на производительность вашего приложения, поэтому стоит иметь это в виду.
Документацию читать пробовал? Ищем, как задать параметры useFetch(): 
useFetch options
This is exactly what you would pass to the normal js fetch, with a little extra.

В доках слово cors не упоминается, но useFetch() поддерживает те же параметры, что и обычный js-вский fetch(). Идём в его документацию:
fetch() Parameters
options [Optional] - A RequestInit object containing any custom settings that you want to apply to the request.

Т.е. параметры запроса кодируются в специальном объекте. Смотрим его, ищем "cors".
RequestInit
mode [Optional] - One of the following values:
same-origin - Disallows cross-origin requests completely.
cors - If the request is cross-origin then it will use the Cross-Origin Resource Sharing (CORS) mechanism.
no-cors - The request must be a simple request, which restricts the headers that may be set to CORS-safelisted request headers, and restricts methods to GET, HEAD, and POST.
navigate - Used only by HTML navigation. A navigate request is created only while navigating between documents.
websocket - Used only when establishing a WebSocket connection.

Сравниваем это с сообщением об ошибке. Заодно читаем примеры useFetch() и обычного fetch(), видим, что там просто передаётся вторым параметром объект с настройками. Т.е. должно быть достаточно добавить второй параметр {mode: "no-cors"} , как и советуется в сообщении об ошибке.
Пять минут гуглежа. Пять минут, Карл!
Вот хватит этого или нет, уже второй вопрос...
Похожие вопросы