nginx反向代理-解决前端跨域问题

1.定义

跨域是指a页面想获取b页面资源，若是a、b页面的协议、域名、端口、子域名不一样，所进行的访问行动都是跨域的，而浏览器为了安全问题通常都限制了跨域访问，也就是不容许跨域请求资源。注意：跨域限制访问，实际上是浏览器的限制。理解这一点很重要！！！

2.跨域访问示例

假设有两个网站，A网站部署在：http://localhost:81 即本地ip端口81上；B网站部署在：http://localhost:82 即本地ip端口82上。

如今A网站的页面想去访问B网站的信息，A网站页面的代码以下（这里使用jquery的异步请求）：

<h2>Index</h2>
<div id="show"></div>
<script type="text/javascript">
        $(function () {
            $.get("http://localhost:82/api/values", {}, function (result) {
                $("#show").html(result);
            })
        })

这是浏览器会提示以下错误信息：

3.nginx反向代理解决跨域问题

3.1nginx配置

关于nginx的配置能够查看另外一篇博文：http://www.cnblogs.com/renjing/p/6126284.html。找到nginx的配置文件“nginx.conf”，修改一下信息

server {
        listen       80; #监听80端口，能够改为其余端口
        server_name  localhost; # 当前服务的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            proxy_pass http://localhost:81;
            proxy_redirect default;
        }

		location /apis { #添加访问目录为/apis的代理配置
			rewrite  ^/apis/(.*)$ /$1 break;
			proxy_pass   http://localhost:82;
       }
#如下配置省略

配置解释：

1.由配置信息可知，咱们让nginx监听localhost的80端口，网站A与网站B的访问都是通过localhost的80端口进行访问。

2.咱们特殊配置了一个“/apis”目录的访问，而且对url执行了重写，最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。

3.rewrite  ^/apis/(.*)$ /$1 break; 

表明重写拦截进来的请求，而且只能对域名后边以“/apis”开头的起做用，例如www.a.com/apis/msg?x=1重写。只对/apis重写。

　　rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1表明正则中的第一个(),$2表明第二个()的值,以此类推。

　　break表明匹配一个以后中止匹配。

3.2 访问地址修改

既然配置了nginx，那么全部的访问都要走nginx，而不是走网站本来的地址（A网站localhost:81,B网站localhost:82）。因此要修改A网站中的ajax访问地址，把访问地址由

“http://localhost:82/api/values”改为》》》“/apis/api/values”。以下代码：

<h2>Index</h2>
<div id="show"></div>

<script type="text/javascript">
        $(function () {
            $.get("/apis/api/values", {}, function (result) {
                $("#show").html(result);
            })
        })
</script>

View Code

 4.网站的访问

5.总结

浏览器跨域的解决方式有不少种：

1.jsonp 须要目标服务器配合一个callback函数。

　　2.window.name+iframe 须要目标服务器响应window.name。

　　3.window.location.hash+iframe 一样须要目标服务器做处理。

　　4.html5的 postMessage+ifrme 这个也是须要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通信。

　　5.CORS  须要服务器设置header ：Access-Control-Allow-Origin。

　　6.nginx反向代理 这个方法通常不多有人说起，可是他能够不用目标服务器配合，不过须要你搭建一个中转nginx服务器，用于转发请求。

我的以为6才是正规的解决方案