I would like to use data from a JSON file in a different domain to integrate on an app using Html and AngularJS and I'm not sure how to do this. I'm having trouble fetching the data from the other domain due to the same-origin policy. The functionality of this app is to search for available phone numbers, through an API I received from a third-party. This is the schema of what I would like to achieve:
- Html file with Form - the user will provide the desired area code and a short 'phrase' (up to 4 chars) which will be a part of the phone number
GET request to the external service provider will be made, using the data the user entered as parameters. The service sits on https, and requires basic authentication. The structure is something like this: https://www.serviceprovider.com/username/phonenumbers?areacode={{areacode}}&phrase={{phrase}}
so if the user enters in the form area code: 212 and phrase SHOP, the GET request will be made to: https://www.serviceprovider.com/username/phonenumbers?areacode=212&phrase=SHOP Using basic auth. The response of this request is a JSON which contains the numbers:
[{phonenumber: '212-555-7467', phrasenumber: '212-555-SHOP'}, {phonenumber:'212'557-4675', phrasenumber: '212 55SHOP5}]
These numbers will be displayed to the user
Right now, things are stuck on step (2) - when trying to make the GET request through the JS/JQuery, I get the Origin is not allowed by Access-Control-Allow-Origin error. I do not have access to the server which holds the JSON, it's a third party and thus any changes in set-up there are out of my scope.
What is the best way to achieve what I am after? Is there any way that I can make the request in a non-browser environment (thus avoiding the error) and temporarily create a copy of the JSON in my own domain, making it accessible for me?
