CORS Question

nelsonstuff

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?

Much appreciated.

bwg

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.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

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.

Cheers,
Lee

SmugMug API Sorcerer

owinter86

Hi,

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.

Thanks,

Oliver

aimtron

It is unfortunately that Smugmug doesn't follow some of the other industry leaders when it comes to APIs and allow us to configure an origin. I absolutely hate that I have to provide a man-in-the-middle approach to uploading photos which leaves me largely disconnected from the upload status. It's truly an unnecessary step if we could simply use properly scoped access tokens, send them to the client browser, and allow the client browser to complete some work directly. I understand the concern, but still believe with proper access scoping, this can be overcome.