Grant Access For Local Developers Machine

API Issues
#1

We can successfully connect to API server and can query the data and fetch it as JSON or XML . However Would you be able to grant us access for our local developers machine?

When editing details, can you enter http://localhost:… and update Authorised JavaScript domains with our development machine address?

Thank you for your help.

1 Like
Javascript: Getting Started
Excel Data Links
#2

I think that we’re still waiting for CH to allow localhost access. However there is the following workaround:

For related issues see:

Issues with CORS when doing this? See:

#3

I am personally really struggling with this issue. I have edited etc/hosts, it now looks like so:

# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1	localhost
255.255.255.255	broadcasthost
::1             localhost
127.0.0.1 localhost application.com
84.19.61.196 localhost application.com
192.168.0.1 localhost application.com

I have http://application.com and https://application.com in the JavaScript domains section of the application.

I have a Fetch function like so:

const fetchOptions = {
    headers: {
      Authorization: 'Basic ' + btoa('API_KEY:')
    }
  }
  fetch(`https://api.companieshouse.gov.uk/search/companies?q=Capgemini`, fetchOptions)
    .then(response => response.json)
    .then(json => console.log(json))
    .catch(error => `Error with Companies House API: ${error}`)

Despite this, I still get

Failed to load https://api.companieshouse.gov.uk/search/companies?q=Capgemini: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

as well as

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.companieshouse.gov.uk/search/companies?q=Capgemini with MIME type application/json.

#4

From the message:

Failed to load … Origin ‘http://localhost:8000’ is …

…that looks like you were accessing your page on localhost as “http://localhost:8000/ {pageThatCallsCH}” where the last part is obviously the path to your local page launching the javascript you’ve shown above. So the browser then informs the CH server that “localhost” port 8000 is trying to access it, which is not in the CH allowed sites list.

What happens if you try accessing this page by entering the alias in the browser e.g. “http://application.com/ {pageThatCallsCH}” (add the 8000 port if needed)?

Another point is that the options you show (in fetchOptions) don’t mention a “credentials” flag - when I checked:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
… this seemed to state you needed this option (as the “Authorization” header counts, I think):

To cause browsers to send a request with credentials included, even for a cross-origin call, add credentials: ‘include’ to the init object you pass to the fetch() method.

So you may need:

const fetchOptions = {
  headers: {
    Authorization: 'Basic ' + btoa('API_KEY:')
  },
  mode: "cors",
  cache: "no-cache", // *default, no-cache, reload, force-cache, only-if-cached
  credentials: "include" // include, *same-origin, omit
};

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

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

I’m not sure about ports - I believe the usual (80 / 443) ports are recognised by Companies House (and 8080?), 8000 is common enough but I don’t know if that’s OK with CH. You could try adding this to the CH allowed URLs if you still have issues (as in the Angular Local Dev Testing thread mentioned previously).

Assuming that ports are the issue and the above didn’t help there are various ways around e.g. like that listed here:

You can add a /etc/hosts entry like the following:
127.0.0.2 my-domain.com
Make sure to use a lo address unused before.
Then you add an iptables rule to redirect the traffic incoming into 127.0.0.2:8080 to 127.0.0.1:80.

iptables -t nat -A OUTPUT -d 127.0.0.2 -p tcp --dport 80 -j REDIRECT --to-port 8080

Or (alternatively) - see last answer here:

You can make localwebapp as alias for localhost in /etc/hosts. Then you can run a webserver (Apache and friends) to detect that hostname:
< VirtualHost *:80 >
ServerName localwebapp

# redirect elsewhere
Redirect localhost:1234

< /VirtualHost >

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

Bumping this.

Although there are workarounds using an alias (thanks @voracityemail :smile:), is there a reason why CH won’t enable access-control-allow-origin: *?

This seems like a cleaner option.

Alternatively updating the documentation to include steps for local development would be a big plus.