Access-Control-Allow-Origin using GET /search/companies API

API Question
#1

Hi there,

Note: I have searched the forum for related questions and only found that issues had been found and fixed in 2017. So posting this as a new topic.

I am attempting to call the GET /search/companies API using the JQuery Ajax capability, to perform a company name search.

My JavaScript is as follows:

$.ajax({
type: 'GET',
url: 'https://api.companieshouse.gov.uk/search/companies?q=' + companyName,
headers: {
	'Authorization': 'Basic MY_API_KEY'
  },
  success: search.handleResponse,
  error: search.handleError
});

When calling this using Google Chrome (Version 70.0.3538.77 - Windows 10 Pro), I get the following error in my DevTools console:

Access to XMLHttpRequest at 'https://api.companieshouse.gov.uk/search/companies?q=test' from origin 'https://MY_DOMAIN.co.uk' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Before attempting to write any Javascript, I proved out that I could call this API using POSTMAN, and was able to get a successful response and had data coming back.

Interestingly, when looking at the Network tab of DevTools, I can see 2 entries under “XHR” as a result of my single AJAX call.

Both have the same request URL as my AJAX code above, but the first has a method of OPTIONS, which returns a 204 and I can see the initator is my AJAX call. The second is a GET and returns a 200 with the expected response containing the data I am after - The initiator is marked as “Other”. I believe the GET is made as a result of a redirect from the OPTIONS request.
However, my AJAX call always fails (with the Javascript error shown above) and falls into the error block, so I am never in a position to see the successful response from the GET.

Why is there an OPTIONS request prior to the expected GET request?

What I’d like: I call the GET, receive a 200 response from the GET request, with the data I expect with no javascript errors. All with no unexpected OPTIONS request.

I have read the Companies House API docs over and over and am failing to see what I am missing.

Thanks a lot,
Ryan

#2

I have searched the forum for related questions and only found that issues had been found and fixed in 2017.

Well technology moves fast but I’m sure these will still help you. Disclaimer - I am not young.

Why is there an OPTIONS request prior to the expected GET request?

I think it would be worth reading these old queries… Don’t forget that even though you’re using jQuery, it doesn’t do everything for you.

Anyway, looking at your code:

  1. ‘Authorization’: ‘Basic MY_API_KEY’ - don’t forget that you need to add a ‘:’ to the end of your API key. Here it’s the http basic username really and there is no password. This does confuse people. Also you should run that all through btoa() - because you’re rolling your own header.

  2. CORS - yes you will need some headers here.
    Lots of info on this - for example in a reply someone made a while back (6 days) to a slightly different issue:
    Grant Access For Local Developers Machine - #4 by voracityemail
    Or here (at random): Using JQuery to access an AWS API Gateway (CORS) | by Andrea Lettieri | Medium

So add “crossDomain: true” to set the expected headers.

So now you should have something like:

$.ajax({
  type: 'GET',
  url: 'https://api.companieshouse.gov.uk/search/companies?q=' + companyName,
  headers: {
	'Authorization': Authorization: 'Basic ' + btoa(MY_API_KEY + ':')
  },
  crossDomain: true,
  success: search.handleResponse,
  error: search.handleError
});

I can’t recall if you need to add mode: “cors”, credentials: “include” or whether jQuery does that for you (or indeed whether they’re relevant).

More info on CORS: Cross-Origin Resource Sharing (CORS) - HTTP | MDN

Test CORS: http://www.test-cors.org/

  1. The part in the error “…from origin ‘https://MY_DOMAIN.co.uk’ …”
    Is the domain you’ve got in the browser when you’re calling your javascript the domain registered with Companies House e.g. whatever appears in the “https://MY_DOMAIN.co.uk” part in the error above? (If it’s “localhost” or an alias of that, check the posts regarding this e.g. here Grant Access For Local Developers Machine - #4 by voracityemail).

Notes and queries
http 204 - 204 No Content — httpstatuses.com
Why am I seeing 204? Probably as part of the Options / CORS preflight request.
http - What are proper status codes for CORS preflight requests? - Stack Overflow