Nginx前后端分离解决跨越

一、什么是跨域？

跨域指的是浏览器不能执行其它网站的脚本，它是由浏览器的同源策略造成的，是浏览器对JavaScript 施加的安全限制。

二、同源策略

根据百度百科 同源策略它是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器都会使用这个策略。

所谓同源指的是：协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。

同源策略限制的情况：

1、Cookie、LocalStorage 和 IndexDB 无法读取

2、DOM 和 Js对象无法获得

3、AJAX 请求不能发送

注意：对于像 img、iframe、linked、script 等标签的 src 属性是特例，它们是可以访问非同源网站的资源的。

**

三、如何解决跨域

1、response 添加header。

2、JSONP 方式。

3、HttpClient 请求转发。

4、nginx 转发

5、其他更多…

具体解决方案可参考大神的文章：https://www.cnblogs.com/ysocean/p/9380551.html

四、nginx解决跨越

问题描述：使用nginx发布前端内容，使用tomcat发布后端内容，会出现跨越问题。

1、前端项目放在myhtml下，使用nginx发布该项目。

 server {
                        listen       8888;
                        server_name  localhost;
                        location / {
                        #静态服务器
                            root   /Users/David/myhtml;
                            index  index.html index.htm;
                        } }

2、后端项目使用tomcat发布，tomcat端口号为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、前端页面show.html访问后端ajax代码：

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

此时数据无法发正常获取，因为违反了同源策略。

解决方案：使用nginx代理tomcat容器，定义html访问规则和tomcat转发规则，实现html内容和tomcat内容都由nginx代理。解决跨域问题。

1、前端项目放在myhtml下，使用nginx发布该项目，定义访问规则。

#静态服务器
location ~.(html|js|css) {
root /Users/David/myhtml;
index index.html index.htm;
}
2、后端项目使用tomcat发布，tomcat端口号为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、添加nginx代理tomcat服务代码，此时访问：http://localhost:8888 可以转发到：http://localhost:8080

  location / {
  #反向代理
  proxy_pass http://localhost:8080;
  }

4、前端ajax代码不做修改，可以简写"/get"。

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

此时可以正常访问数据。

nginx核心配置：

server {
listen       8888;
server_name  localhost;
#静态服务器
location ~.(html|js|css) {
    root   /Users/David/myhtml;
    index  index.html index.htm;
}
 #反向代理tomcat
 location / {
    proxy_pass http://localhost:8080;
}
}

解析：

前端页面的访问地址为：http://localhost:8888/show.html（所有.html都进行静态解析）

show.html页面中请求后端地址为：http://localhost:8888/get （此时不违反跨越提交的规范，同域正常提交请求。）

后端地址符合nginx转发规则，代理转发到地址：http://localhost:8080/get（可以正常取到数据）

五、负载均衡（额外篇）

http {
 include mime.types; default_type application/octet-stream; 
upstream ngixServers{
 server 192.168.10.11:8080; 
 server 192.168.10.12:9090; } 
 server {     
 listen 8888; server_name localhost;
     
 location / {
        root   html;
        index  index.html index.htm;
        proxy_pass http://ngixServers;  
    }
  // ...
 }

参考大神文章：

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