Hi, I'm a beginning coder so please bear with me on my question...
I'm trying to build a simple api request on my external website just to display images from one of my albums. I'm using React and hosting my site on Surge.sh.
When I use fetch() to request, I get a "No 'Access-Control-Allow-Origin' header is present on the requested resource."
Why am I able to get a [200 Ok] response on the Live API Browser for the direct url that I have in my api request, but get the CORS error when requesting that url through my own code? Should I not use fetch()?
I've looked through the documentation and other posts and don't seem to be finding the answer. But, I'm a beginner so maybe I don't know what to look for or read. Can someone explain this to me and point me in the right direction on how to achieve a simple READ ONLY request on my albums?
Hi there. CORS is a mechanism for bypassing the same-orgin security restriction implemented by web browsers thats prevent loading content from other origins via scripts (XHR/Fetch). Because your site is running on a different origin, XHR/Fetch requests to different origins will be subject to the same-origin policy and the CORS implementation of the origin you're trying to access. SmugMug does not allow cross origin requests from domains not under our control.
The Live API Browser is not making XHR/Fetch requests, its just loading a url in the browser. However if it were making XHR/Fetch requests, the origin of the request (https://api.smugmug.com) would be the same as the origin the request is being made to so the same-origin policy would not apply.
One way to work around the same-origin policy is to have an app on your server that would act as a proxy and make calls to SmugMug from the server. If you search for "CORS Proxy" you'll find a number of resources explaining the approach. I would highly caution against using a hosted 3rd party proxy, since you are not in control of the server and information sent over it.
Let us know if you have any further questions.
SmugMug API Sorcerer
I just want to jump on this post as I was having the same issue with my App, I have alleviated the CORS issues with a CORS proxy using https://galvanize-cors-proxy.herokuapp.com/ as a starter, I am able to fetch data on my local server but my deployed app https://oliverwinter.herokuapp.com/photography/ successfully requests the data but has an empty response and I am a bit lost on how to fix this.