How do you solve cross-domain problems when separating front-end and back-end?

Currently when I am working on my blog, I consider using front-end and back-end separation, placing the front-end and back-end logic in two separate repositories and deploying them on two servers.

My main domain name is: godtail.cn (currently using ghost, new blog is being written...)

• The front-end domain name is: www.godtail.cn | godtail.cn | m.godtail.cn

• The backend domain name is: api.godtail.cn

But when communicating, I found that it prompted Cross-domain. Well, I thought it would not cross-domain when the main domain name was the same (the same domain name and different ports would also cross-domain).

Currently, there are two solutions that I know of:

1. Use JSONP. To be honest, I don’t particularly like using JSONP. I feel that it will cause security problems or reduce efficiency (these two points are just my guesses).
   Reason for guessing:

   • It can be accessed from any source. Is there any js injection?

   • Both the backend and the frontend need JSONP for processing. (It’s not pleasant to write, and all requests must use JSONP).

2. Add cross-domain header in backend

   • If there are many front-end domain names, many domain names need to be added and maintained. If other systems need to request your interface, add a cross-domain header? Not easy to deal with...

Does anyone have a better solution?

================【9-22 17:25】======================

In addition, if you set the cross-domain header, you can set the IP, which is only for internal calls. If external calls are required, it will not be satisfied. In addition, I am not sure if there are any compatibility issues with older versions of browsers.