Get data using Axios, CORS error

API Question
1

Hi,

I try to make a search aria with data from this API, for that I am using VueJs with axios. I read some posts from here but I still haven’t managed to make it work.

I am using artisan serve with a custom url like http://example.local , on port 80.

This is my code, where in my variables I have companies house url and my api key.
In Authorised JavaScript domains I have both with .local and .local:80

  axios
    .get(this.$companiesHouseUrl, {
      params: {
        q: this.search_for_company
      },
      headers: {
        Authorization: "Basic " + btoa(this.$companiesHouseKey + ":")
      }
    })
    .then(response => {
      console.log("Response:", response);
    })
    .catch(e => {
      console.log("Error:", e);
    });

Access to XMLHttpRequest at ‘https://api.companieshouse.gov.uk/?q=test’ from origin ‘http://example.local’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

UPDATE:
I try from my live domain.

  • in JavaScript domains I use both URL and URL:80
  • add ‘Content-Type’: ‘application/json’ to headers ,or ‘text/json’
  • add ‘Access-Control-Allow-Origin’: ‘*’ and ‘Content-Type’: ‘application/json’ to headers
  • add ‘Origin’: ‘myURL’
  • if I remove Headers, no CORS error but error for auth

I didn’t find the solution yet…

UPDATE 2 (SOLVED)

  • I found out what I was doing wrong… my $companiesHouseUrl was the
    main url so I change the url: this.$companiesHouseUrl + ‘search/companies’