Как можно исправить проблему "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(): <br/> <a href="https://use-http.com/#/?id=options" rel="nofollow">useFetch options</a> <br/> <blockquote>This is exactly what you would pass to the <b>normal js fetch</b>, with a little extra.</blockquote> <br/> В доках слово cors не упоминается, но useFetch() поддерживает те же параметры, что и обычный js-вский fetch(). Идём в его документацию: <br/> <a href="https://developer.mozilla.org/en-US/docs/Web/API/Window/fetch#options" rel="nofollow">fetch() Parameters</a> <br/> <blockquote>options [Optional] - A <b>RequestInit object</b> containing any custom settings that you want to apply to the request.</blockquote> <br/> Т.е. параметры запроса кодируются в специальном объекте. Смотрим его, ищем "cors". <br/> <a href="https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#mode" rel="nofollow">RequestInit</a> <br/> <blockquote>mode [Optional] - One of the following values:<br/>
    same-origin - Disallows cross-origin requests completely.<br/>
    cors - If the request is cross-origin then it will use the Cross-Origin Resource Sharing (CORS) mechanism.<br/>
<b>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.</b><br/>
    navigate - Used only by HTML navigation. A navigate request is created only while navigating between documents.<br/>
    websocket - Used only when establishing a WebSocket connection.<br/>
</blockquote> <br/> Сравниваем это с сообщением об ошибке. Заодно читаем примеры useFetch() и обычного fetch(), видим, что там просто передаётся вторым параметром объект с настройками. Т.е. должно быть достаточно добавить второй параметр <code>{mode: "no-cors"}</code> , как и советуется в сообщении об ошибке. <br/> Пять минут гуглежа. Пять минут, Карл! <br/> Вот хватит этого или нет, уже второй вопрос...
Похожие вопросы