动静分离再『向前多走一步』，就是前后端分离。上例中的 Spring Boot 不提供任何动态页面、资源，只提供 JSON 格式数据。
将上例的 index.html 改造成如下形似：
<body>
<h2></h2>
<script src="./js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://localhost:80/api/hello', // 注意这里的 URL
type: "POST",
success: function (result) {
$("h2").html("跨域访问成功:" + result.data);
},
error: function (data) {
$("h2").html("跨域失败!!");
}
});
</script>
</body>
再在 nginx 的 proxy_pass 配置成它所代理的 SpringBoot 的真实访问路径。例如：
location /api {
proxy_pass http://127.0.0.1:8080/api;
# proxy_set_header Host $http_host;
# proxy_set_header X-Real-IP $remote_addr;
# proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
简单起见，我们这里的 Spring Boot 就运行在本地，并占用 8080 端口。
在结合上述的配置，意味着我们在页面发起的 http://127.0.0.1:80/api/hello 的请求，被 Nginx 接收后，Nginx 会『帮』我们去访问 http://127.0.0.1:8080 的 /api/hello，并将结果再返回给客户端了浏览器。
在这个过程中，客户端浏览器始终面对的都是 Nginx，因此，请求页面的 index.html 和 AJAX 请求 /api/hello 都是发往了同一个服务器，自然就没有跨域问题。
网友评论