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