1

Тема: Помилка "Access to fetch..."

Доброго дня, хочу потестувати API, для цього написав просту функцію на JS та підключив цей скрипт до простого каркасу HTML

Функція:

async function Test(){      
        const url_sb = 'https://my_api_url';
        try {
       var headers_sb = {
                    'Authorization':'Basic [i]мій_закодований_логін:пароль[/i]',
                    'Content-Type':'application/json',
                    'x-robots-tag': 'noindex, nofollow',
                    'cache-control': 'no-store, no-cache, must-revalidate',
                    'pragma': 'no-cache',
                    'access-control-allow-origin':'*',
                    'allow': 'GET, POST, HEAD'
                 }
        const result = await fetch(url_sb, {method:'GET', headers:headers_sb}) 
        const data = await result.json()
        console.log('Responce', data )
    }
        catch(e){
            console.log('Catched error', e)
        }
    }

    Test();

Але при запуску сторінки в консолі отримую помилку:
Access to fetch at 'https://my_api_url' from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Чи може хтось допомогти виправити код щоб усе запрацювало?

2

Re: Помилка "Access to fetch..."

No 'Access-Control-Allow-Origin' header is present on the requested resource.

це, швидше за все говоре, що проблема з сервером

3

Re: Помилка "Access to fetch..."

Коли роблю запит за допомогою Talent API Tester до отримую відповідь і все ОК, все-таки я щось роблю не так

4

Re: Помилка "Access to fetch..."

гляньте заголовки того talent api tester  і порівняйте зі своїми, може то допоможе виявити проблему

5 Востаннє редагувалося andriesko (24.12.2020 21:19:19)

Re: Помилка "Access to fetch..."

Дякую за підказку
Коли додаю mode  в лінійці:

const result = await fetch(url_sb, {method: "GET", mode: 'no-cors', headers:headers_sb}) 

То отримую помилку авторизації (401), хоча авторизацію вставляю ідентичну що і в  talent api tester

6

Re: Помилка "Access to fetch..."

отже те саме - дивиться, які саме гедери відправляються, може та авторизація якась не така, як в тому api

7

Re: Помилка "Access to fetch..."

Виглядає на то що гедери  ідентичні

8

Re: Помилка "Access to fetch..."

а на сервері що показує? виведіть рядок авторизації на стороні сервера, тоді точно буде зрозуміло, що там не так

9 Востаннє редагувалося mikeos (25.12.2020 11:43:59)

Re: Помилка "Access to fetch..."

1. access-control-allow-origin - цей заголовок потрібно забрати з запиту (це заголовок відповіді яку має віддавати серевер який в тебе на my_api_url)
2. https://my_api_url - а тут треба налаштувати CORS заголовки відповіді щоб приймати запити з того домену з якого ти робиш fetch. див. https://developer.mozilla.org/uk/docs/Web/HTTP/CORS

Ще є такі штуки як cors-proxy, наприклад https://github.com/Rob--W/cors-anywhere, але тоді треба шоб той твій my_api_url був доступний зовні