Solution for cross-domain problem separation between front and back end

statement :

In the past development, the front-end separation is not as hot as it is now, so-called front-end engineers are simply writing a static page by the Java engineer or PHP engineer embedded in the page to develop, which may add to the workload of these engineers, and in style debugging by the pure HTML code to jsp,asp , PHP debugging up to two engineers to discuss the problem, to solve the cost is very high. The front and back ends are separated, and the frontend engineer is not only responsible for the presentation, but writing the corresponding code to make the DOM render, and the network interaction focus on the front-end engineer here. This allows the server-side engineer to be more energetic in maintaining the logic, transactional, and performance of the code. Yes, the technical framework is flourishing today, the front end is also to MVC. Angular,vue and so on. Below I will briefly describe how to solve cross-domain problem of cross-domain problem brief (referring to the relatively clear table on the network)

First Solution jsonp (deprecated)

In fact, I do not agree with this scheme, first, on the encoding Jsonp will be alone because of the callback relationship, in the incoming and outgoing there is a definition callback function will be encoded "untidy." A simple description of Jsonp can cross domain because of the script tag of JavaScript, The code of the script tag is returned by the server, which bypasses the browser's cross-domain restrictions. And the callback function is defined in the client page according to the format, so that the script tag returns implementation call the second scenario, reverse proxy (recommended)

Proxy access In fact, there are many scenarios in the actual application, in the cross-domain application of the principle approach is: Through the reverse proxy server listening to the same port, access to the same domain name, different paths mapped to different addresses, for example, in the Nginx server, listening to the same domain name and port, different paths forwarded to the client and server, To solve cross-domain problems by reverse proxy for different ports and domain names, the case is as follows:

server {
        listen       ;
        server_name  domain.com;
        #charset Koi8-r;
        #access_log  logs/host.access.log  main;

        location/client {#访问客户端路径
            proxy_pass http://localhost:81;
            Proxy_redirect default;
        }
        Location/apis {#访问服务器路径
            rewrite  ^/apis/(. *) $/$1 break;
            Proxy_pass   http://localhost:82;
       }
}

The third scenario sets the header in the server

By setting the server header to set the browser's restrictions on server cross-domain, the following is true:

Unified filter Settings public class DomainFilter implements filter {@Override public void init (Filterconfig filterconfig) thr  oWS servletexception {} @Override public void DoFilter (ServletRequest req, servletresponse Res, Filterchain
        Chain) throws IOException, servletexception {httpservletresponse response = (httpservletresponse) res;
        Response.setheader ("Access-control-allow-origin", "*");
        Response.setheader ("Access-control-allow-methods", "POST, GET, OPTIONS, DELETE");
        Response.setheader ("Access-control-max-age", "3600");
        Response.AddHeader ("Access-control-allow-headers", "Origin, X-requested-with, Content-type, Accept");
    Chain.dofilter (req, res); } @Override public void Destroy () {}}//spring boot filter set @Bean public Filterregistrationbean fil
        Terregistrationbean () {Filterregistrationbean Registrationbean = new Filterregistrationbean (); DomainFilter DomainFilter = new DomainFilter ();
        Registrationbean.setfilter (DomainFilter);
        list<string> urlpatterns = new arraylist<string> ();
        Urlpatterns.add ("/*");
        Registrationbean.seturlpatterns (Urlpatterns);
    return Registrationbean; }