上面已經說到，禁止跨域問題其實是瀏覽器的一種安全行為，而現在的大多數解決方案都是用標簽可以跨域訪問的這個漏洞或者是技巧去完成，但都少不了目標服務器做相應的改變，而我最近遇到了一個需求是，目標服務器不能給予我一個header，更不可以改變代碼返回個script，所以前5種方案都被我否決掉。最后因為我的網站是我自己的主機，所以我決定搭建一個nginx並把相應代碼部署在它的下面，由頁面請求本域名的一個地址，轉由nginx代理處理后返回結果給頁面，而且這一切都是同步的。
關於nginx的一些基本配置和安裝請看我的另一篇博客，下面直接講解如何配置一個反向代理。
首先找到nginx.conf或者nginx.conf.default 或者是default里面的這部份
其中server代表啟動的一個服務，location 是一個定位規則。
|
1
2
3
4
5
6
7
|
location /｛ #所有以/開頭的地址，實際上是所有請求
root html ＃去請求../html文件夾里的文件,其中..的路徑在nginx里面有定義，安裝的時候會有默認路徑，詳見另一篇博客
index index.html index.htm ＃首頁響應地址
｝
|
從上面可以看出location是nginx用來路由的入口，所以我們接下來要在location里面完成我們的反向代理。
假如我們我們是www.a.com/html/msg.html 想請求www.b.com/api/?method=1¶=2；
我們的ajax：
|
1
2
3
4
5
6
7
|
var
url =
'http://www.b.com/api/msg?method=1¶=2'
；
<br>$.ajax({
type:
"GET"
,
url:url,
success:
function
(res){..},
....
})
|
上面的請求必然會遇到跨域問題，這時我們需要修改一下我們的請求url，讓請求發在nginx的一個url下。
|
1
2
3
4
5
6
7
8
9
|
var
url =
'http://www.b.com/api/msg?method=1¶=2'
；
var
proxyurl ＝
'msg?method=1¶=2'
；
//假如實際地址是 www.c.com/proxy/html/api/msg?method=1¶=2; www.c.com是nginx主機地址
$.ajax({
type:
"GET"
,
url:proxyurl,
success:
function
(res){..},
....
})
|
再在剛才的路徑中匹配到這個請求，我們在location下面再添加一個location。
|
1
2
3
4
|
location ^~/proxy/html/{
rewrite ^/proxy/html/(.*)$ /$1
break
;
proxy_pass http:
//www.b.com/;
}
|
以下做一個解釋：
1.'^~ /proxy/html/ '
就像上面說的一樣是一個匹配規則，用於攔截請求，匹配任何以 /proxy/html/開頭的地址，匹配符合以后，停止往下搜索正則。
2.rewrite ^/proxy/html/(.*)$ /$1 break;
代表重寫攔截進來的請求，並且只能對域名后邊的除去傳遞的參數外的字符串起作用，例如www.c.com/proxy/html/api/msg?method=1¶=2重寫。只對/proxy/html/api/msg重寫。
rewrite后面的參數是一個簡單的正則 ^/proxy/html/(.*)$ ,$1代表正則中的第一個(),$2代表第二個()的值,以此類推。
break代表匹配一個之后停止匹配。
3.proxy_pass
既是把請求代理到其他主機，其中 http://www.b.com/ 寫法和 http://www.b.com寫法的區別如下:
不帶/
|
1
2
3
4
|
location /html/
{
proxy_pass http:
//b.com:8300;
}
|
帶/
|
1
2
3
4
|
location /html/
{
proxy_pass http:
//b.com:8300/;
}
|
上面兩種配置，區別只在於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代理就成功了。