How to call api from localhost via https

Question

I am currently on a 2-person team developing a web application. I am developing the client application and my partner develops the backend in a separate project. My partner has uploaded his project to our domain (https://api.example.com) and insists only calls to the back-end should come through https.

As I develop my client application, I serve it via localhost. The problem is localhost is served via http by default. I don't know how to call the back-end via https.

I am developing my client application via the Angular 4 CLI. I have attempted to serve my app over https://localhost via a self-signed certificate, but I am having horrible issues doing this as Chrome is detecting a certificate that is not genuine.

So I am stuck. What is the best way to call our development server over https? Or, is there a different way I should be doing this? Should by partner make a different api endpoint available to me for the purposes of developing a client application? How should we work together to solve this problem?

• Mortz: Can you connect to the API endpoint using something else, like cURL for example? If you want to make a GET request from your client side code, I don't see why your development server has to be https. Just use the full address of the API in your client side code and it should work
• Tyler Brown: The server only accepts calls over https. When i call the server: api.example.com/api/auth, chrome responds with two messages. The first is a CORS error saying "No 'Access-Control-Allow-Origin' header is present on the requested resource." The second is a 401 unauthorized from the server. Should my partner change the server settings to make the server accept these requests? What would be the impact on security?
• Tyler Brown: So the only way I can have a call go through is if i serve my client app from https. Is this the right way to do it? If so, how do I convince the browser my certificate is valid?
• Mortz: Yes. CORS error is at your server end. You need to enable the server to accept requests from other sites, i.e. your development server in this case
• Tyler Brown: So would the development server be localhost:4200? Or should i actually buy a development server that the site lives on such as dev.example.com?

Answer 1

No, you can continue working with localhost:4200 as your dev server. Just enable CORS on the server side, use https://api.example.com in your client side code and it should work. AFAIK, your problem is with access to the server from an external client, not https

• Tyler Brown: Yes, this is the best option. I talked with my backend developer and he finally enabled it. Headache removed for now. So the solution is to have the backend project allow CORS, but you can still make API calls via https. It just means I don't have to host my client app over https.

Answer 2

An alternative would be to use rec-la SLL certificates and domain to expose local pages over HTTPS.

https://<any hostname>.rec.la/ => https://localhost/

Rec-la on Github

Answer 3

if you are running the project on chrome there is a extension called ALLOW CROSS ORIGIN , download that extension and call the Back-end API.

• Tyler Brown: This is a hack and only works sparingly. This is a good option to try but the truth is I had to talk to the backend developer who opened up calls from clients on http. phew