Explain how cross-domain security policy works using the example of an Angular module?

Question

Angular

I am writing an angular module, in fact a portable widget that other sites on angular will embed in themselves. There is a side that provides api. The widget, in fact, simply receives information from the api and sends requests. refused direct requests to api, because there will be authorization and something else, and now we transfer everything via WebSockets, which is very inconvenient.
I don’t quite understand why it’s impossible to work directly with the api at least to receive data, I understand that the api and the widget will lie on different servers, and for normal data exchange you will need to pass headers, but is this problem not solved by angular or JS tools? Should I use the built-in tools of Angular to work with web sockets or do I have to use JS, because the project is not big? Why then can I now work with this api from any other place using angular? How are these issues resolved on large projects when the api and the module are on different servers? I ask a knowledgeable person to give a detailed answer, because for now there is porridge in my head. I will be grateful.

Answer 1

Angular's built-in web socket tools
which ones? If we are talking about WebSocketSubject, then this is rxjs, not Angular, and yes, you can use it, why not.
Angular knows nothing about websockets.
Angular has nothing to do with it at all. The browser makes a request. If the request goes to another domain, the browser first asks permission from this domain if it can make this request. Through another request with the OPTIONS method. The so-called preflight.
If the backend on that domain returns headers that say "ok, you can", then the browser requests data and everything is ok.
This is Cross-origin resource sharing, CORS
Thus, the success of your request depends entirely on the backend.
read
Plus from sites on the https scheme, you can not make unencrypted requests, you can only https and wss.