Nginx solution across the front and rear ends separated

First, what is the cross-domain?

Cross-domain means that the browser can not execute scripts other sites, it is caused by the browser's same-origin policy, are browser security restrictions imposed on JavaScript.

Second, the same-origin policy

According to Baidu Baike  it is a security policy proposed by Netscape, which is the core of the browser is the most basic security features, the absence of the same origin policy, the normal function of the browser's same-origin policy may be affected, all now support JavaScript the browser will use this strategy.

The so-called homologous means: protocol, domain names, port numbers are the same, as long as there is a different, so are non-homologous.

 

Origin policy restrictions situation:

　　1, Cookie, LocalStorage and can not read IndexDB

　　2, DOM objects can not be obtained, and Js

　　3, AJAX request can not be transmitted

　　Note: For the src attribute, like img, iframe, linked, script and other labels are a special case, they can access the resources of the non-homologous sites.

Third, how to solve cross-domain

1, response Add header.

2, JSONP way.

3, HttpClient request is forwarded.

4, nginx forwards

5, many more ...

Specific solutions can reference the god of the article: https://www.cnblogs.com/ysocean/p/9380551.html

Four, nginx across solve

Problem Description: using nginx front-end publishing content using the tomcat release back-end content will appear across a problem.

1, the front end of the project in the next myhtml, using nginx publish the project.

{Server 
        the listen        8888 ; 
        server_name localhost; 
        LOCATION / { 
        # static server 
            the root    / the Users / David / MyHTML; 
            index index.html index.htm; 
        } 
}

2, the back-end publishing project using tomcat, tomcat port number is 8080.

@RestController
public class UserController {
    @Autowired
    UserService userService;

    @RequestMapping("/get")
    public List<User> getUserByPage(int pageSize, int pageNum){
        List<User> userList = userService.getAllUser();
        return userList;
    }
}

3, the front page show.html access back-end ajax Code:

$.ajax({
         url: "http://localhost:8080/get",
         type: "post",
         dataType: "json",
         success: function (data) {
         console.log(data);
         }
});

 ❌ data can not be sent at this time normally get, because the violation of the same origin policy .

Solution: Use nginx proxy tomcat container, define access rules and html tomcat forwarding rules to achieve tomcat html content and content by nginx proxy. To solve cross-domain problems.

1, the front end of the project in the next myhtml, using nginx publish the project, define the access rules.

# Static server 
LOCATION . ~ (HTML | JS | CSS) { 
    the root    / the Users / David / MyHTML; 
    index index.html index.htm; 
}

2, the back-end publishing project using tomcat, tomcat port 8080, modify the controller to add a virtual path.

@RestController
@RequestMapping("/spring")
public class UserController {
    @Autowired
    UserService userService;

    @RequestMapping("/get")
    public List<User> getUserByPage(int pageSize, int pageNum){
        List<User> userList = userService.getAllUser();
        return userList;
    }
}

3, add nginx proxy tomcat service code, then visit: http: // localhost: 8888 can be forwarded to: http: // localhost: 8080

~ LOCATION / Spring { 
    # reverse proxy 
    proxy_pass HTTP: // localhost: 8080; 
}

4, to modify the code distal ajax

$.ajax({
         url: "http://localhost:8888/spring/get",
         type: "post",
         dataType: "json",
         success: function (data) {
         console.log(data);
         }
});

✔️ then you can normally access the data.

nginx core configuration:

{Server 
    the listen        8888 ; 
    server_name localhost; 
    # static server 
    LOCATION . ~ (HTML | JS | CSS) { 
        the root    / the Users / David / MyHTML; 
        index index.html index.htm; 
    } 
    # reverse proxy Tomcat 
    LOCATION ~ / Spring { 
        proxy_pass HTTP: // localhost: 8080; 
    } 
}

Resolution:

　　Visit the front page address is: http: // localhost: 8888 / show.html

　　show.html page request back-end address is: http: // localhost: 8888 / spring / get (this time without violating the norm across submitted, submit a request with the domain normally.)

　　Back-end address forwarding rules in line with nginx proxy forwarded to the address: http: // localhost: 8080 / spring / get (to get normal data)　　　

Reference Okami sentence:

https://www.cnblogs.com/ysocean/p/9380551.html