Trouble Recovering Data From API with Async in React

Question

I am trying to run an api in react and have the response returned as a variable. The api returns the title of a given webpage.

DETAILS The api uses the following URL {with a website url appended to the end} http://textance.herokuapp.com/title/

A manual submission of this URL http://textance.herokuapp.com/title/www.antstand.com/ will result in "Antstand the bamboo laptop stand" being displayed in the browser. I am trying to use this api to set variable in my app.

MY CURRENT CODE

 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)

On running the code my unexpected ouptut is below (I was expecting : "Antstand the bamboo laptop stand")

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

I think Cors refers to a cross origin error.

gautamits · Accepted Answer · 2020-04-29 10:18:05Z

1

body: (...) and type:'cors' means you are getting opaque response because of CORS. Either send 'Access-Control-Allow-Origin' to your origin ( or * for all origins ), or configure proxy on frontend to change origin header of all requests so that server could not receive it as CORS. axios has options to configure proxy. create-react-app also provides mechanism to configure proxy in development environment.

answered Apr 29, 2020 at 10:18

gautamits

1,2929 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kashif · Accepted Answer · 2020-04-29 11:16:53Z

try this way it's display your expecting result "Antstand the bamboo laptop stand" 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))

Collectives™ on Stack Overflow

Trouble Recovering Data From API with Async in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related