How does one solve cross-origin problems encountered during frontend and backend separation?

At present, when I am in my blog, considering the use of frontend and backend separation, I separately deploy the frontend and backend logic on two version libraries and deploy them on two servers. My primary domain name is godtail.cn (currently ghost is used, and a new blog is writing ...) front-end domain name: www.godtail.cn | godt... at present, when I am in my blog, considering the use of frontend and backend separation, I separately deploy the frontend and backend logic on two version libraries and deploy them on two servers.

My primary domain name is:godtail.cn(Currently usedghost, The new blog is writing ...)

• Front-end domain name:www.godtail.cn|godtail.cn|m.godtail.cn

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

However, a message is displayed during communication.Cross-OriginOkay, I thought it would not be cross-origin when the primary domain name is the same (the same domain name and different ports will also cross-origin ).

Currently, I know two solutions:

1. When using JSONP, I really don't like JSONP very much. It may cause security problems or decrease in efficiency (these two points are just my guesses ).
   Reasons for speculation:

   • Can any source be accessed? will there be js injection?

   • The backend and front-end must be processed by JSONP. (It is not easy to write, and JSONP must be used for all requests ).

2. Add a cross-origin header to the backend

   • If there are many front-end domain names and many domain names need to be added, maintenance is required. If other systems need to request your interface, add it to the cross-origin header? Not easy to handle...

Is there a better solution?

=================== [9-22] ========================== ====

In addition, you can set the cross-origin header and ip addresses for internal calls only. If an external call is required, it cannot be met. you are not sure whether there are any browser compatibility problems with the old version.