search

btholt / complete-intro-to-react-v6

learn React.js with Brian Holt
https://frontendmasters.com/courses/complete-react-v6/
Other
1.47k stars 215 forks source link

Issue with handling Cross origin requests #34

Closed veeraraghavan closed 3 years ago

veeraraghavan commented 3 years ago

There are http calls to external service like the one shown below

 const res = await fetch(
      `http://pets-v2.dev-apis.com/pets?id=${this.props.match.params.id}`
    );

I do see the browser does not flag them for violating cross origin. I however get an error when i invoke a call to few https endpoints though modifying the url.

Regards, Veera

divakar54 commented 3 years ago

I have been facing the same issue

quriosapien commented 3 years ago

The URL in question here needs to support CORS requests. Detailed explanation here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

As a part of solution, we can create a proxy to the url we are trying to fetch. Proxy in Parcel - https://v2.parceljs.org/features/api-proxy/ Other dev-tools have similar proxy module as well.

veeraraghavan commented 3 years ago

The URL in question here needs to support CORS requests. Detailed explanation here - https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

As a part of solution, we can create a proxy to the url we are trying to fetch. Proxy in Parcel - https://v2.parceljs.org/features/api-proxy/ Other dev-tools have similar proxy module as well.

Thank you for the response. I noticed the response header **Access-Control-Allow-Origin: *** . I had failed to notice it.