Nginx是一个高性能的HTTP和反向代理服务器。我们可以通过Nginx对需要跨域的站点进行反向代理配置,就能达到跨域的效果。
下载Nginx
Nginx官网(http://nginx.org/en/download.html)下载,如果是Linux系统,直接输入下面命令即可下载
wget http://nginx.org/download/nginx-1.8.1.tar.gz
我们这里使用的是1.8.1版本
安装Nginx
使用tar xvf nginx-1.8.1.tar.gz命令,解压刚下载文件,得到一个nginx-1.8.1目录。
进入nginx-1.8.1,执行./configure --prefix=/usr/local/nginx命令,表示将nginx安装到/usr/local/nginx目录下。
在使用make & make install命令正式安装nginx,完成后就可以在/usr/local/nginx目录下看到已经装好的nginx了。
如果安装权限不够,请使用sudo make install命令。
模拟跨域错误
启动Nginx,并在Nginx的html目录下,编写一个ajax.html页面,在里面通过ajax方式请求taobao的ip地址查询api。
在浏览器中访问http://127.0.0.1/ajax.html,然后按F12即可在Console里面看到跨域错误。
下面我们就通过Nginx来解决这种跨域问题。
Nginx处理跨域方式一
编辑Nginx的conf/nginx.conf文件,在server节点里面加上以下Location配置,表示把ip.taobao.com这个地址,代理成本地可访问的地址。这样我们的ajax请求代理后的地址http://127.0.0.1/api了。由于此时他们在同一个域下,自然就不存在跨域问题了。
location /api {
proxy_pass http://ip.taobao.com/;
}
在编辑之前的ajax.html代码,把ajax之前的url改成/api/service/getIpInfo.php?ip=127.0.0.1
在通过浏览器访问http://127.0.0.1/ajax.html,用F12就可以看到做Console里面输出了正常结果,没有跨域错误了。
Nginx处理跨域方式二
这种方式与前一种能达到一样的效果。但第一种一般用于自己请求别人站点的时候使用,而第二种比较适合别人请求我们的时候使用。针对第二情况我们只要在Nginx里面做了配置,别人请求我们的时候,就不存在跨域问题了。
比如,我们自己有一个user接口,返回一个user的json数据,提供给别人使用。
先在nginx的html目录下编写一个user.json文件,用来模拟接口。
然后在桌面编写一个user.html文件,请求这个user接口,即http://127.0.0.1/user.json。然后在浏览器中直接打开user.html文件,按F12就会看到跨域错误。
为解决这种情况,我们只需要在Nginx的配置文件中写入如下配置就可以了。
add_header 'Access-Control-Allow-Origin' '*';
重启Nginx再访问,就可以发现跨域问题不存了。
第一种方式适用于我们请求第三方的情况下,第二种方式适用于别人请求我们的情况下,同时第二种方式需要高版本浏览器的支持,IE浏览器则不能低于IE10。