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

Question

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.

Stretch0 · Accepted Answer · 2018-03-14 09:40:37Z

1

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)
    })

edited Mar 14, 2018 at 9:40

answered Mar 14, 2018 at 9:14

Stretch0

9,40215 gold badges95 silver badges162 bronze badges

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

9 Comments

dheeraj chandra Over a year ago

Still no use. Just string 'xml' is getting printed in the console.

Stretch0 Over a year ago

Can you make an API request in postman and show us the result?

dheeraj chandra Over a year ago

API : api.greatschools.org/search/schools?key=************&state=CA&q=cupertino&levelCode=elementary-schools&limit=3 , Response: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <schools> <school> <gsId>9094</gsId> <name>St. Joseph of Cupertino Elementary School</name> <type>private</type> <lat>37.3243</lat> <lon>-122.032</lon> </school> </schools>

Stretch0 Over a year ago

Have updated my post. You need to move the accept property to the headers object.

dheeraj chandra Over a year ago

No Result, only "xml" is getting printed in the console

|

Sanjay · Accepted Answer · 2021-07-15 07:52:18Z

1

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

answered Jul 15, 2021 at 7:52

Sanjay

1111 silver badge9 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related