跨域的解决方案：nginx

一：解决方案

1、通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

二：使用nginx代理跨域

实现原理类似于Node中间件代理，需要你搭建一个中转nginx服务器，用于转发请求。

使用nginx反向代理实现跨域，是最简单的跨域方式。只需要修改nginx的配置即可解决跨域问题，支持所有浏览器，支持session，不需要修改任何代码，并且不会影响服务器性能。

实现思路：通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录。

三：正向代理和反向代理

实践中客户端无法直接跟服务端发起请求的时候，我们就需要代理服务。代理可以实现客户端与服务端之间的通信,我们的Nginx也可以实现相应的代理服务。代理分为正向代理和反向代理，正向代理的代理对象是客户端，反向代理的代理对象是服务端原文

在这里插入图片描述

正向代理
1.概念：在客户端配置代理服务器，通过代理服务器进行互联网访问。常见的正向代理应用：vpn，vpn是在客户端设置的（并不是在远端服务器设置的），浏览器先访问vpn地址，vpn地址转发请求，并将结果原路返回。
代理对象是客户端，不知道服务端是谁。
2.配置

server {
    
      
    resolver 192.168.1.1; #指定DNS服务器IP地址  
    listen 8080;  
    location / {
    
      
        proxy_pass http://$http_host$request_uri; #设定代理服务器的协议和地址  
        //$http_host$request_uri指明目的主机和uri，属于nginx变量，一般不需要修改。
    }  
}

反向代理
1.概念：在服务端配置代理服务器。客户端不需要任何配置就能访问，只需要将请求发送到反向代理服务器，由反向代理服务器去选择目标服务器，获取数据后再返回给客户端。对外就一个服务器，暴露的是反向代理服务器地址，隐藏了真实服务器IP地址。
代理对象是服务端，不知道客户端是谁。

2.配置：nginx配置如下

server {
    
    
    listen       80;  //listen：配置nginx监听浏览器请求的端口号
    location /demo {
    
    
        proxy_pass http://127.0.0.1:8081;  //proxy_pass：配置接收到被代理浏览器发来的请求之后，需要帮忙执行的请求是什么
    }
    location /demo1 {
    
    
        proxy_pass http://127.0.0.1:8082;
    }
}

启动demo和demo1两个工程之后，浏览器输入下面地址：
在这里插入图片描述

可以看到，外部统一使用80端口访问服务时，nginx根据路径前缀进行代理，然后返回执行结果。对于nginx反向代理路径配置有几点需要注意，使用时要非常谨慎。

上面proxy_pass指令配置的url为http://127.0.0.1:8081,注意在该url后面不能使用/demo1后缀进行代替，否则就报错了。为什么呢?首先nginx会判断proxy_pass指令中配置的url地址是否包含uri，如果在proxy_pass指令中配置的url地址不包含uri，那么nginx将会使用请求路径的uri进行转发，如果在proxy_pass指令中配置的url地址包含uri，则nginx会忽略请求location中的uri,转而使用你在proxy_pass中配置的uri进行覆盖，转发，另外，/也是一种uri，哈哈，要特别小心哈~

举例子：
假设请求地址为：http://localhost/demo/getServerInfo.json,location配置为/demo,proxy_pass配置为http://xxxx:port,则会使用http://xxxx:port/demo/getServerInfo.json进行转发，结果正确。如果proxy_pass配置为http://xxxx:port/demo1,则会使用http://xxxx:port/demo1进行转发，因为/demo1覆盖了/demo

参考：
前端跨域系列（3）- 跨域方法总结
 Nginx正向代理与反向代理
 Nginx 学习系列（一） ------------- 正向代理与反向代理