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

迈不过友情╰ 2022-05-24 07:11 300阅读 0赞

## 1.什么是跨域以及产生原因 ##

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源。

跨域情况如下：

<table style="width:526px;"> 
 <tbody> 
 <tr> 
 <td style="border-color:#c0c0c0;">url</td> 
 <td style="border-color:#c0c0c0;">说明</td> 
 <td style="border-color:#c0c0c0;">是否跨域</td> 
 </tr> 
 <tr> 
 <td style="border-color:#c0c0c0;">http://www.cnblogs.com/a.js http://www.a.com/b.js</td> 
 <td style="border-color:#c0c0c0;">不同域名</td> 
 <td style="border-color:#c0c0c0;">是</td> 
 </tr> 
 <tr> 
 <td style="border-color:#c0c0c0;">http://www.a.com/lab/a.js http://www.a.com/script/b.js</td> 
 <td style="border-color:#c0c0c0;">同一域名下不同文件夹</td> 
 <td style="border-color:#c0c0c0;">否</td> 
 </tr> 
 <tr> 
 <td style="border-color:#c0c0c0;">http://www.a.com:8000/a.js http://www.a.com/b.js</td> 
 <td style="border-color:#c0c0c0;">同一域名，不同端口</td> 
 <td style="border-color:#c0c0c0;">是</td> 
 </tr> 
 <tr> 
 <td style="border-color:#c0c0c0;">http://www.a.com/a.js https://www.a.com/b.js</td> 
 <td style="border-color:#c0c0c0;">同一域名，不同协议</td> 
 <td style="border-color:#c0c0c0;">是</td> 
 </tr> 
 <tr> 
 <td style="border-color:#c0c0c0;">http://www.a.com/a.js http://70.32.92.74/b.js</td> 
 <td style="border-color:#c0c0c0;">域名和域名对应ip</td> 
 <td style="border-color:#c0c0c0;">是</td> 
 </tr> 
 <tr> 
 <td style="border-color:#c0c0c0;">http://www.a.com/a.js http://script.a.com/b.js</td> 
 <td style="border-color:#c0c0c0;">主域相同，子域不同</td> 
 <td style="border-color:#c0c0c0;">是（cookie不可访问）</td> 
 </tr> 
 <tr> 
 <td style="border-color:#c0c0c0;">http://www.a.com/a.js http://a.com/b.js</td> 
 <td style="border-color:#c0c0c0;">同一域名，不同二级域名（同上）</td> 
 <td style="border-color:#c0c0c0;">是</td> 
 </tr> 
 </tbody> 
</table>

##  ##

## 2.跨域的常见解决方法 ##

目前来讲没有不依靠服务器端来跨域请求资源的技术

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服务器，用于转发请求。

## 3.nginx反向代理解决跨域 ##

上面已经说到，禁止跨域问题其实是浏览器的一种安全行为，而现在的大多数解决方案都是用标签可以跨域访问的这个漏洞或者是技巧去完成，但都少不了目标服务器做相应的改变，而我最近遇到了一个需求是，目标服务器不能给予我一个header，更不可以改变代码返回个script，所以前5种方案都被我否决掉。最后因为我的网站是我自己的主机，所以我决定搭建一个nginx并把相应代码部署在它的下面，由页面请求本域名的一个地址，转由nginx代理处理后返回结果给页面，而且这一切都是同步的。

关于nginx的一些[基本配置和安装][Link 1]请看我的另一篇博客，下面直接讲解如何配置一个反向代理。

首先找到nginx.conf或者nginx.conf.default 或者是default里面的这部份

![736226-20151222105413468-939765727.png][]

其中server代表启动的一个服务，location 是一个定位规则。

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;width:35px;"> 1 2 3 4 5 6 7 </td> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;"> <code>location /｛&nbsp;&nbsp; #所有以/开头的地址，实际上是所有请求</code> &nbsp; <code>root&nbsp; html&nbsp;&nbsp;&nbsp;&nbsp; ＃去请求../html文件夹里的文件,其中..的路径在nginx里面有定义，安装的时候会有默认路径，详见另一篇博客</code> &nbsp; <code>index&nbsp; index.html index.htm&nbsp; ＃首页响应地址</code> &nbsp; <code>｝</code> </td> 
 </tr> 
 </tbody> 
</table>

从上面可以看出location是nginx用来路由的入口，所以我们接下来要在location里面完成我们的反向代理。

假如我们我们是www.a.com/html/msg.html 想请求www.b.com/api/?method=1&para=2；

我们的ajax：

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;width:35px;"> 1 2 3 4 5 6 7 </td> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;"> <code>var</code>&nbsp;<code>url =&nbsp;</code><code>'http://www.b.com/api/msg?method=1&amp;para=2'</code><code>；</code> <code>&lt;br&gt;$.ajax({ </code> <code>type:&nbsp;</code><code>"GET"</code><code>,</code> <code>url:url,</code> <code>success:&nbsp;</code><code>function</code><code>(res){..},</code> <code>....</code> <code>})</code> </td> 
 </tr> 
 </tbody> 
</table>

上面的请求必然会遇到跨域问题，这时我们需要修改一下我们的请求url，让请求发在nginx的一个url下。

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;width:35px;"> 1 2 3 4 5 6 7 8 9 </td> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;"> <code>var</code>&nbsp;<code>url =&nbsp;</code><code>'http://www.b.com/api/msg?method=1&amp;para=2'</code><code>；</code> <code>var</code>&nbsp;<code>proxyurl ＝&nbsp;</code><code>'msg?method=1&amp;para=2'</code><code>；</code> <code>//假如实际地址是 www.c.com/proxy/html/api/msg?method=1&amp;para=2; www.c.com是nginx主机地址</code> <code>&nbsp;</code><code>$.ajax({ </code> <code>type:&nbsp;</code><code>"GET"</code><code>,</code> <code>url:proxyurl,</code> <code>success:&nbsp;</code><code>function</code><code>(res){..},</code> <code>....</code> <code>})　　</code> </td> 
 </tr> 
 </tbody> 
</table>

再在刚才的路径中匹配到这个请求，我们在location下面再添加一个location。

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;width:35px;"> 1 2 3 4 </td> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;"> <code>location ^~/proxy/html/{ </code> <code>rewrite ^/proxy/html/(.*)$ /$1&nbsp;</code><code>break</code><code>;</code> <code>proxy_pass http:</code><code>//www.b.com/;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

### 以下做一个解释： ###

1.'^~ /proxy/html/ '

就像上面说的一样是一个匹配规则，用于拦截请求，匹配任何以 /proxy/html/开头的地址，匹配符合以后，停止往下搜索正则。

2.rewrite ^/proxy/html/(.\*)$ /$1 break;

代表重写拦截进来的请求，并且只能对域名后边的除去传递的参数外的字符串起作用，例如www.c.com/proxy/html/api/msg?method=1&para=2重写。只对/proxy/html/api/msg重写。

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

break代表匹配一个之后停止匹配。

3.proxy\_pass

既是把请求代理到其他主机，其中 http://www.b.com/ 写法和 http://www.b.com写法的区别如下:

不带/

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;width:35px;"> 1 2 3 4 </td> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;"> <code>location /html/</code> <code>{ </code> <code>　　proxy_pass http:</code><code>//b.com:8300;&nbsp;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

带/

<table> 
 <tbody> 
 <tr> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;width:35px;"> 1 2 3 4 </td> 
 <td style="border-color:#c0c0c0;vertical-align:baseline;"> <code>location /html/&nbsp;</code> <code>{&nbsp;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>proxy_pass http:</code><code>//b.com:8300/;&nbsp;</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

上面两种配置，区别只在于proxy\_pass转发的路径后是否带 “/”。

针对情况1，如果访问url = http://server/html/test.jsp，则被nginx代理后，请求路径会便问http://proxy\_pass/html/test.jsp，将test/ 作为根路径，请求test/路径下的资源。

针对情况2，如果访问url = http://server/html/test.jsp，则被nginx代理后，请求路径会变为 http://proxy\_pass/test.jsp，直接访问server的根资源。

修改配置后重启nginx代理就成功了。

参考：http://seanlook.com/2015/05/17/nginx-location-rewrite/

http://www.jbxue.com/article/2187.html

# Nginx配置跨域请求 Access-Control-Allow-Origin \* #

location ~ [^/]\.php(/|$) {
            fastcgi_pass php5.5:9000;
            #fastcgi_pass unix:/dev/shm/php-cgi.sock;
            fastcgi_index index.php;
            include fastcgi.conf;
    
            #if ($http_origin ~* (http?://.*\.17byh\.com$)) {
                add_header Access-Control-Allow-Origin $http_origin;
                add_header 'Access-Control-Allow-Credentials' 'true';
                add_header 'Access-Control-Allow-Methods' 'GET,POST';
            #}
        }

目标设置允许跨域：

http://blog.51cto.com/13523664/2060430

[CORS]: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
[Link 1]: http://www.cnblogs.com/gabrielchen/p/5063717.html
[736226-20151222105413468-939765727.png]: /images/20220524/6c0176ab22e641d5a35f4d5e4c92b5e2.png