利用Nginx解决跨域问题

浏览器的同源策略

浏览器安全的基石是"同源政策"（same-origin policy）。

含义

同源政策指的是：

• 协议相同
• 域名相同
• 端口相同

目的

同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。

跨域

描述

协议，域名，端口号，只要有一个不同，就会产生跨域问题。

跨域的常见解决方法

解决跨域问题有很多方法：

• jsonp 需要目标服务器配合一个callback函数。
• window.name+iframe 需要目标服务器响应window.name。
• window.location.hash+iframe 同样需要目标服务器作处理。
• html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。
• CORS 需要服务器设置header ：Access-Control-Allow-Origin。
• 利用nginx反向代理，解决跨域问题。不用目标服务器配合，不过需要你搭建一个中转nginx服务器，用于转发请求。

nginx解决跨域

nginx是反向代理服务器。要了解什么是反向代理，先看一下正向代理吧

正向代理

特点

• 客户端非常明确要访问的服务器地址。
• 服务器只清楚请求来自哪个代理服务器，而不清楚具体来自哪个具体客户端。

举例

由于某些原因，我们浏览国外的网站就是正向代理。

总结

正向代理，代理的是客户端，是一个客户端和原始服务器之前的服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标（原始服务器）。
然后代理服务器向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。

用途

访问原来无法访问的资源，如 Google。可以做缓存，加速访问资源。对客户端访问授权，上网进行认证。代理可以记录用户访问记录（上网行为管理），对外隐藏用户信息。

反向代理

特点

• 请求的来源是明确的（客户端是明确的）
• 请求具体由哪台服务器处理并不明确
• 反向代理代理的是服务端

举例

某宝网站中大部分功能也是直接使用 Nginx 进行反向代理实现的，并且通过封装 Nginx 和其他的组件之后起了个高大上的名字：Tengine。

用途

主要用于服务器集群分布式部署的情况下，反向代理隐藏了服务器的信息

作用

保证内网的安全，通常将反向代理作为公网访问地址，Web 服务器是内网。负载均衡，通过反向代理服务器来优化网站的负载。

正向代理和反向代理图示区别

图解：

• 在正向代理中，Proxy 和 Client 同属于一个 LAN（图中方框内），隐藏了客户端信息。
• 在反向代理中，Proxy 和 Server 同属于一个 LAN（图中方框内），隐藏了服务端信息。

实际上，Proxy 在两种代理中做的事情都是替服务器代为收发请求和响应，不过从结构上看正好左右互换了一下，所以把后出现的那种代理方式称为反向代理了。

负载均衡

描述

客户端发送的，nginx反向代理服务器接收到的请求数量，就是我们说的负载量。请求数量按照一定的规则进行分发，到不同的服务器处理的规则，就是一种均衡规则。

所以将服务器接收到的请求按照规则分发的过程，称为负载均衡。

种类

负载均衡在实际项目操作过程中，有硬件负载均衡和软件负载均衡两种，硬件负载均衡也称为硬负载，如 F5 负载均衡，相对造价昂贵成本较高。

但是数据的稳定性安全性等等有非常好的保障，如中国移动中国联通这样的公司才会选择硬负载进行操作。

更多的公司考虑到成本原因，会选择使用软件负载均衡，软件负载均衡是利用现有的技术结合主机硬件实现的一种消息队列分发机制。

Nginx配置（极简）

server {
	listen		   80;
	server_name    xx.xxx.xx.xx;

	location /xx {
		root 	html;
		index 	index.html index.html;
		proxy_pass http://xx.xxx.xx.xx;
	}
}

location /｛ #所有以/开头的地址，实际上是所有请求

root html ＃去请求…/html文件夹里的文件,其中…的路径在nginx里面有定义，安装的时候会有默认路径

index index.html index.htm ＃首页响应地址

proxy_pass 把请求代理到其他主机

---

本文参考：

• 浏览器同源政策及其规避方法.
• 终于有人把 Nginx 说清楚了，图文详解！.
• 用nginx的反向代理机制解决前端跨域问题.