Как исправить Access to fetch at '' from origin 'https://site.com' has been blocked by CORS policy: Request header field access-control-allow?

Question

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

Доброго времени суток, друзья. Я хочу при выборе select'a отправлять GET запрос для получения данных и отображать их Но сталкиваюсь с ошибкой:

Access to fetch at 'https://fapi.coinglass.com/api/futures/longShortRa...}' from origin 'https://site.com' has been blocked by CORS policy: Request header field access-control-allow-methods is not allowed by Access-Control-Allow-Headers in preflight response.

Получаю данные отсюда: https://fapi.coinglass.com/api/futures/longShortRa...

HTML

<div class="row">
                        <div class="col-md-3 col-sm-12 form-group">
                            <label for="profession">Монета:</label>
                            <select id="longshort_token" name="profession" class="form-control">
                                <option value="BTC">BTC</option>
                                <option value="ETH">ETH</option>
                                <option value="XRP">XRP</option>
                                <option value="LUNA">LUNA</option>
                            </select>
                        </div>
                        <div class="col-md-3 col-sm-12 form-group">
                            <label for="profession">Тайм-Фрейм:</label>
                            <select id="longshort_tf" name="profession" class="form-control">
                                <option value="3">5 минут</option>
                                <option value="10">15 минут</option>
                                <option value="11">30 минут</option>
                                <option value="2">1 час</option>
                                <option value="1">4 часа</option>
                                <option value="4">12 часов</option>
                                <option value="5">24 часа</option>                                
                            </select>
                        </div>
                    </div>

JavaScript:

$('#longshort_token').change(function(){
        let token = $(this).val();
        let tf = $('#longshort_tf').val();
        console.log('Выбрана монета: ' + token + ' и Тайм-фрейм: ' + tf);
        
        fetch(
          'https://fapi.coinglass.com/api/futures/longShortRate?symbol={token}&timeType={tf}',
          {
            method: 'GET',
            headers: {  'Content-Type': 'application/json', 
                              'Accept': 'application/json',
                              'Origin': 'https://site.com',                        
            },
          }
        ).then (data => {
            console.log(data);
        });         
        
    });

Помогите пожалуйста решить проблему, спасибо.

Comments

[Глеб Старков]

Поставь в браузер расширение для обхода CORS

[Глеб Старков]

Или, можно попробовать в request передать параметр mode: 'no-cors'

[Lynn «Кофеман»]

Глеб Старков, не можно. С no-cors никаких данных не получишь.

Александр Андропов, а кто-то обещал что это API работает в браузере?

[Глеб Старков]

Lynn «Кофеман», странно, а я получал

[Lynn «Кофеман»]

Глеб Старков, не верю ©

В режиме no-cors ответ будет вот таким
https://fetch.spec.whatwg.org/#concept-filtered-re...

An opaque filtered response is a filtered response whose type is "opaque", URL list is the empty list, status is 0, status message is the empty byte sequence, header list is empty, and body is null.

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

Lynn «Кофеман», А почему у меня без события change нормально отрабатывает ? То есть, если я обращаюсь так:

let data;
    
    fetch("https://fapi.coinglass.com/api/futures/longShortRate?symbol=BTC&timeType=3")
        .then(response => response.json()
    )
    .then (data => {
        console.log(data['data'][0]);
    });

То данные приходят нормально, а если я использую событие onchange на select'e, тогда уже нельзя ?

[Lynn «Кофеман»]

Александр Андропов, А что за ересь вы запрашиваете в событии onchange?

[Lynn «Кофеман»]

Александр Андропов, кажется вам надо подучить синтаксис https://learn.javascript.ru/es-string#stroki-shablony

[Глеб Старков]

Lynn «Кофеман», Да, наверное, так.
Я, лишь проверил, что нет ошибки CORS.
Были данные, или нет, при этом, я не проверял.
Спасибо, Вам!

Answer 1

[zkrvndm]

Целевой сайт должен разрешить вашему сайту отображать данные, только тогда вы сможете легально сделать такой запрос. Нелегально же вы можете использовать прокси, т. е. пропустить запрос через свой сервер - пусть ваш сервер делает запрос и отдаёт результат в браузер.

Дело в том, что политикой безопасности браузеров запрещено делать запросы с одного сайта на другой, если второй сайт не дал явного разрешения первому. Иначе представьте такую ситуацию, вы заходите на очередной ноунейм сайт и тот за вас делает запросы в личный кабинет сбербанк онлайн и стягивает все ваши деньги. Не хорошо получилось бы, верно?

Comments

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

А почему у меня без события change нормально отрабатывает ? То есть, если я обращаюсь так:

let data;
    
    fetch("https://fapi.coinglass.com/api/futures/longShortRate?symbol=BTC&timeType=3")
        .then(response => response.json()
    )
    .then (data => {
        console.log(data['data'][0]);
    });

То данные приходят нормально, а если я использую событие onchange на select'e, тогда уже нельзя ?

[zkrvndm]

Александр Андропов, я не экстрасенс, но вероятно через селект у вас код ответа отнюдь не 200, т. е. вы посылайте кривой запрос.