CORS issue AtoM API

[Stef Emiljanowicz]

Hi,

I'm spending the lead up to Christmas experimenting with linking the AtoM API up to a react application. I'm relatively inexperienced with React and completely inexperienced with the AtoM API so if this turns out to be a react issue as opposed to an AtoM issue then apologies in advance. I'm basically falling at the first hurdle.

My test request is from my app on localhost:

      await fetch('http://egurl.com/api/informationobjects/heritage-collection', {

        Authorization: 'Basic xxxxxxxxx',

        mode: 'no-cors'

      }).then(res => {

        console.log("res: ", res);

      }).catch(error => console.log(error));

The above returns the error:

net::ERR_ABORTED 401 (Unauthorized)

removing mode: 'no-cors' from the request params returns:

localhost/:1 Access to fetch at 'http://egurl.com/api/informationobjects/heritage-collection' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Does anyone have any pointers here - am I missing something blindingly obvious or am I nearly there? Any help appreciated.

Edit: using cors-anywhere to prefix url as in: "https://cors-anywhere.herokuapp.com/http://egurl.com/api/informationobjects/heritage-collection" doesn't appear to have any effect

Thanks in advance

Stef

[José Raddaoui]

Hi Stef,

That sounds like an interesting project!

You're hitting the same-origin policy which is a browsers issue. CORS is a system to pass that policy but the AtoM API doesn't have that system implemented by default. A few options:

• Do you expect to face the same issue on production? If you're planing to deploy the React application on the same URI scheme, host name and port number you wont face that problem (e.g.: http://egurl.com/react-app). In that case I'd suggest that you set up your development environment with a local AtoM instance.
• Does your React application have any back-end? Making the request to AtoM outside the browser context will avoid the issue too.
  
• Do you have access to the AtoM code? You could add the CORS headers on the AtoM code (in here).
  
• I've never tested it, but the `cors-anywhere` approach looks like it should work. I wonder if your credentials are okay, I don't really know about React's `no-cors` mode but I'd expect that it lets you see a 200 response code from the opaque response instead of a 401 if the authentication has passed.

Please, let us know how it goes and feel free to share any news about your project in the forum.

Best regards,

Radda.

[Stef Emiljanowicz]

Hi Radda,

Thanks for getting back with this, very useful. I suspect the problem is in the api call. TBH I'm finding the documentation a little difficult: https://www.accesstomemory.org/en/docs/2.4/dev-manual/api/api-intro/ At present I'm at the learning stage so it's very much proof of concept. I want to see what can be done with the AtoM api alone to start with and then make a decision as to whether to integrate a separate backend. The react stuff I've experimented with thus far has been as a headless application on top of WordPress so if a backend is needed at any point it will probably be through that route.

In answer to your questions: 

• No it will be somewhere different. I'm very much the front end guy and haven't had any experience of setting up atom although if I can find an easy way to set it up on localhost then that could be a solution.
• The question about the backend I think I've addressed above
• I do have access to the AtoM code and what you suggest may be a solution, although as stated, I suspect very strongly that my problem is with the api call itself.
• I've used cors-anywhere on a number of other apps and it's been fine which again makes me think it's the api call :-) 

I usually use axios but have used fetch here to make it easier to see what's going on. What would really help is if someone had a sample javascript API call for AtoM. Like I say, some of the stuff in the documentation is a little bit difficult to follow which is probably a reflection of my inexperience as opposed to the way it's written.

Cheers and thanks

Stef

[José Raddaoui]

Hi Stef,

I think you're only missing the `headers` key on the second argument of the `fetch` call. The following works for me using the demo site (AtoM 2.5):

let corsUrl = 'https://cors-anywhere.herokuapp.com/';

let atomUrl = 'https://demo.accesstomemory.org/';

let endpoint = 'api/informationobjects/kantokoski-koski-koivula-korpela-family-3';

let headers = {'Authorization': 'Basic ' + btoa('de...@example.com:demo')};

fetch(corsUrl + atomUrl + endpoint, {'headers': headers})

.then(response => response.json())

.then(json => console.log(json))

.catch(error => console.error(error));

The demo site data is restored every hour disabling the REST API plugin, so it may return a 404 code if you test it like that.

About running AtoM locally, you can find more information in the Docker and Vagrant environments documentation.

Bests,

Radda.

[Stef Emiljanowicz]

Radda that is brilliant, thank you mate. About to go up to London today but will try using this over the weekend.

Much appreciated.

Stef