CODEWITHSUNDEEP
xmlreactjsrest
dheeraj chandra
dheeraj chandra

Reputation: 83

Could not get xml data in the response using fetch in react

I'm using Great Schools Api :

fetch("https://api.greatschools.org/search/schools?key=***********&state=CA&q=cupertino&levelCode=elementary-schools&limit=1",{ 
    method: 'GET',
    Accept:'application/xml',
    headers : new Headers ({
      'content-type': 'application/x-www-form-urlencoded',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT',
      'Access-Control-Allow-Headers': 'Content-Type',  
    }),
    mode:'no-cors'
    })
    .then(response => {
      console.log(response, 'data')
    })

console for response is : 

Response
bodyUsed: false
headers: Headers {  }
ok: false
redirected: false
status: 0
statusText: ""
type: "opaque"
url: ""

But in Browser Network console I'm geting correct XMl response.

How to get correct response.

Upvotes: 2

Views: 3224

Answers (2)

Sanjay
Sanjay

Reputation: 111

When the Response's type is opaque as shared by you, it means that the request is still blocked by cors. The browser's network tab shows you the request's response but the fetch's callback would only show you opaque response. Additionally, response.ok would be true if the fetch is actually successful and the response is ready to be consumed in the callback

Upvotes: 1

Stretch0
Stretch0

Reputation: 9251

You are logging the response object.

You need to access the response body.

You can do this by returning response.text()

From the fetch docs

Body.text() Takes a Response stream and reads it to completion. It returns a promise that resolves with a USVString (text).

fetch("https://api.greatschools.org/search/schools?key=***********&state=CA&q=cupertino&levelCode=elementary-schools&limit=1",{ 
    method: 'GET',
    headers : new Headers ({
      'Accept:'application/xml',
      'content-type': 'application/x-www-form-urlencoded',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, PUT',
      'Access-Control-Allow-Headers': 'Content-Type',  
    }),
    mode:'no-cors'
    })
    .then(response => {
      return response.text()
    })
    .then(xml => {
      console.log("xml", xml)
    })

Upvotes: 1

Related Questions