Nginx 解決瀏覽器 Ajax 跨域問題

跨域是指 host 爲 A 頁面中的 Ajax 發起指向 host B 的請求，只要 A 和 B 的協議、域名、端口、子域名其中任何一項不一樣，則執行的訪問都會被認爲是跨域的請求，幾乎全部的瀏覽器爲了安全等問題，對跨域訪問作了限制，也就是沒法經過瀏覽器發起跨域請求。跨域問題的本質是瀏覽器的限制。但也並不意味着瀏覽器根本不能發出任何跨域請求，在發起跨域請求後，瀏覽器總會發送一個 OPTION 請求，並根據響應的 Header 中 Access-Control-Allow-Origin 參數值進行下一步操做，若是這個參數不存在或不符合當前的域，則拒絕這個跨域請求。解決這個問題的一個簡單方法就是使用 Nginx 反向代理。

場景示例

如今假設在同一臺主機上部署有兩個網站，訪問地址分別爲 localhost:8080（A） 和 localhost:8081（B）， A 站的某個頁面 Ajax 想要訪問 B 的某個接口，以 jQuery 的 Ajax 爲例：

$.get(
    "http://localhost:8081/api/orders",
    {},
    function (result) {
    // ...
});
複製代碼

顯然，在沒有作任何其餘配置的狀況下，這個請求必定會發送失敗。

Nginx 反向代理

修改 Nginx 安裝目錄下 conf/nginx.conf 文件，添加以下內容：

server {
    listen 80;
    server_name localhost;

    location /{
        proxy_pass http://localhost:8080
    }

    # 全部跨域訪問以 /api 開頭
    location /api {
        # 請求改寫
  rewrite ^/api/(.*)$ /$1 break;
  proxy_pass http://localhost:8081;
   }
}
複製代碼

• 這樣配置並啓動 Nginx 以後，能夠經過 localhost 的 80 端口 訪問 8080和 8081 端口的網站
• 全部以 /api 開頭的請求將被重寫，而後被髮送給 8081 端口
• 對請求的重寫爲正則式的形式： ^/api/(.*)$ /$1 break; $1 表示匹配正則表達式中的第一個分組，也就是 (.*) 匹配的內容，將其改寫爲 /匹配內容，好比 /api/abc/def/ghi 將被改寫爲 /abc/def/ghi， break 表示一次匹配成功則結束。

URL 更改

原來 Ajax 請求中全部指向 localhost:8081/*** 的請求如今都應該改爲 localhost/api/***，好比這樣：

$.get(
    "http://localhost/api/orders",
    {},
    function (result) {
    // ...
});
複製代碼

其餘方案

CORS （跨域資源共享），須要設置服務端響應頭中 Access-Control-Allow-Origin 參數。

我的博客同步更新，獲取更多技術分享請關注：鄭保樂的博客