Восстановление данных из API с помощью Asyn c в React - PullRequest
Новая
       3

Восстановление данных из API с помощью Asyn c в React

0 голосов
/ 29 апреля 2020

Я пытаюсь запустить API в реакции и получить ответ в виде переменной. API возвращает заголовок данной веб-страницы.

ДЕТАЛИ API использует следующий URL-адрес {с добавленным в конец URL сайта} http://textance.herokuapp.com/title/

Ручная отправка этого URL http://textance.herokuapp.com/title/www.antstand.com/ приведет к тому, что в браузере отобразится сообщение «Antstand theambooamboo stand». Я пытаюсь использовать этот API-интерфейс для установки переменной в моем приложении.

МОЙ ТЕКУЩИЙ КОД 

 async function titleAPI(props) {
        const baseUrl = 'http://textance.herokuapp.com/title/'
        const response = await fetch(baseUrl + props)
        const data = await response
        console.log('FUNCTION OUTPUT: ',data)
        return data
      }
      titleAPI(myUrl).then(console.log)

При выполнении кода мой неожиданный выход ниже (я был ожидание: «Antstand бамбуковая подставка для ноутбука») 

FUNCTION OUTPUT:  
Response {type: "cors", url: "http://textance.herokuapp.com/title/www.antstand.com/", redirected: false, status: 200, ok: true, …}
type: "cors"
url: "http://textance.herokuapp.com/title/www.antstand.com/"
redirected: false
status: 200
ok: true
statusText: "OK"
headers: Headers {}
body: (...)
bodyUsed: false
__proto__: Response

Я думаю, что Cors относится к ошибке перекрестного происхождения.

Ответы [ 2 ]

1 голос
/ 29 апреля 2020

body: (...) и type:'cors' означает, что вы получаете непрозрачный ответ из-за CORS. Либо отправьте «Access-Control-Allow-Origin» вашему источнику (или * для всех источников), либо настройте прокси-сервер на внешнем интерфейсе для изменения заголовка origin всех запросов, чтобы сервер не мог получить его как CORS. ax ios имеет опции для настройки proxy . create-реакции-приложение также предоставляет механизм для настройки прокси в среде разработки.

0 голосов
/ 29 апреля 2020

попробуй так, покажи свой ожидаемый результат "Antstand the bamboo выносная подставка для ноутбука" show 

 const titleAPI=async props =>{
        const baseUrl = 'http://textance.herokuapp.com/title/'
        const url = baseUrl + props
        const response = await fetch(url,{
            method:'GET',
            mode:"cors",
            credentials:"same-origin",
            cache:"no-cache",
            headers:{
                "Content-Type":"application/json",
                "Access-Control-Allow-Origin":"*",
            },
            redirect:"follow",
            referrer:"no-referrer"
        })
        let data = await response.text()
        return data
    }    
titleAPI('www.antstand.com/').then(data=>console.log(data))
...