CORS with backend & Angular2 frontend

Question

I have the following architecture:

1. A backend which offers services via REST api. This backend uses an embedded Tomcat server started on http://localhost:8080.
2. A frontend in Angular 2 with a static HTTP server (lite-server) on http://localhost:8000. The frontend sent requests to backend via "@angular/http".

The frontend is published on Internet to be accessible for everyone. I would like to protect the backend from CORS (only my frontend can do request on the backend).

What should be the value send by backend for 'Access-Control-Allow-Origin' in HTTP header ? I guess the request sent by frontend has the origin equals to IP address of the final user ? So, I should put a wildcard "*" as 'Access-Control-Allow-Origin' ? => no CORS security

Is my understanding is correct ? Is my architecture is bad ? What is the solution to this problem ?

Answer 1

I think it must be like:

Access-Control-Allow-Origin: http://127.0.0.1:8000

Using wildcard (*) is a bad idea. (And it needs setting a false Access-Control-Allow-Credentials header.) So you are right.

Answer 2

I'd assign a domain name to your frontend, pointing to the ip of the frontend, which will probably be your router's ip address (search google for 'what is my ip') if you are hosting using localhost and it is open to the internet. The address you would need should then be the domain name you set in your DNS (e.g. on Cloudflare) which points to the ip you give to it.