How does the cross-domain problem be resolved between the API server and the front end server?

The browser requests the front-end server static resources, HTML, CSS and so on,
The browser then makes an AJAX request to the API server, resulting in cross-domain issues.

The plan I'm currently thinking of,
First, the front and back resources are placed under the same domain name, but the feeling is not too reasonable.
The second is to use the reverse proxy, but it is not clear whether it is appropriate.

How can i solve this problem through the backend?

Reply content:

The browser requests the front-end server static resources, HTML, CSS and so on,
The browser then makes an AJAX request to the API server, resulting in cross-domain issues.

The plan I'm currently thinking of,
First, the front and back resources are placed under the same domain name, but the feeling is not too reasonable.
The second is to use the reverse proxy, but it is not clear whether it is appropriate.

How can i solve this problem through the backend?

There are basically the following solutions across domains

1. JSONP

2. CORS

3. Window.name

4. Document.domain

5. 5.location.hash

6. 6.window.postmessage ()

Refer to the following article for specific HTTPS://GITHUB.COM/RCCODER/BL ...

The API server sets the cross-domain header, and if you are writing in spring, you can use code like this

@Componentpublic class Corsfilter implements Filter {@Override public void Destroy () {} @Override Public        void DoFilter (ServletRequest req, servletresponse Res, Filterchain chain) throws IOException, Servletexception {        HttpServletResponse response = (httpservletresponse) res;        HttpServletRequest request = (httpservletrequest) req;        Response.setheader ("Access-control-allow-origin", "Your front-end server address");        Response.setheader ("Access-control-allow-methods", "POST, PUT, GET, OPTIONS, DELETE, HEAD, PATCH");        Response.setheader ("Access-control-max-age", "3600");        Response.setheader ("Access-control-allow-headers", "X-requested-with, X-auth-token, Content-type"); Response.setheader ("Access-control-expose-headers", "X-requested-with, X-auth-token, Content-Type, X-TOTAL-COUNT")        ;        Response.setheader ("Access-control-allow-credentials", "true"); if (! " Options ". Equalsignorecase (Request.getmethod ())) {Chain.dofilter (reQ, RES); }} @Override public void init (Filterconfig config) throws servletexception {}}

For example, there are two items: P and API

Then the invocation is similar: P frontend-"p backend-" API

The main back end of the Nodejs, you can use the code to achieve cross-domain, if it is express, recommended packaging into middleware

res.setHeader('Access-Control-Allow-Origin', req.headers.origin);res.setHeader('Access-Control-Allow-Credentials', true);res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');res.setHeader('Access-Control-Allow-Headers','x-requested-with,content-type');

The best answer is now, and don't forget to ask Withcredentials:true to bring a cookie.

JSONP can refer to the following

Access-control-allow-origin: Front-end domain name

Personally think that the use of reverse proxy is the most reliable

It may be convenient to use Nginx to reverse proxy, set the cross-domain response header is not all compatible with IE

Reverse proxy is relatively simple

The backend code written by node uses Express/koa to introduce cors () middleware directly into the backend code.

It is convenient to use Nginx to do reverse proxy.

Simply put a JS file on the API server, the front-end reference, and then there is no cross-domain problem, just like calling the logic of external statistics.

