通過nginx反向代理實現跨域訪問

同源策略

• 同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能
• 同源 指的是 域名、協議、端口都相同。如果其中有一個不同，瀏覽器會認為不同源，也就是跨域

跨域訪問實現過程

• 寫一段最簡單的請求后台的代碼，將后台返回結果在控制台輸出，此時，瀏覽器請求地址和代碼里請求后台的url地址是同源的，頁面沒有報錯，后台返回的結果輸出到控制台里：

前端html代碼

請求結果

• 然后，我換個請求后台的url地址，將a.tankhui.cn 換成 b.tankhui.cn 但在nginx中實際他們指向的訪問目錄是一樣的。此時，瀏覽器請求地址a.tankhui.cn和代碼里請求后台的url地址 b.tankhui.cn 不同源，所以，頁面出現了跨域報錯 。

將a.tankhui.cn 換成 b.tankhui.cn

出現跨域報錯

• 下面是此時的后台 ngixn配置：

nginx配置

• 現在為了可以訪問 b.tankhui.cn 的內容，又要解決跨域的問題，我在前端代碼中還是請求 a.tankhui.cn ，然后，在nginx配置中，將來自 a.tankhui.cn 的后端請求代理到 b.tankhui.cn，此時可以正常訪問 b.tankhui.cn的內容

請求代理到 b.tankhui.cn

來自 b.tankhui.cn的請求結果

• 為了證實請求確實被轉發到 b.tankhui.cn，我在nginx配置中，將訪問日志記錄到特定的文件下：

設置 b.tankhui.cn的訪問日志，注意server_name 是 b.tankhui.cn

• 當我訪問 http://a.tankhui.cn/index.html 時，能看到 b.tankhui.cn 網站的訪問日志確實有記錄：

b.tankhui.cn nginx 日志記錄

• 此時，已經實現了跨域的訪問。然而，上面是將所有來自 a.tankhui.cn 的后台請求，都轉發到了 b.tankhui.cn, 這種方式比較粗暴，實際工作中，只有一部分請求，需要代理到其他網站。

• 下面，為了標識需要代理到b.tankhui.cn 的請求，請求后台的 url地址 后面加一個flag=1的參數：

請求參數加了 flag=1

• 相應地，在后台nginx配置中，給 flag先賦一個初始值 0，只有當請求參數中帶有 flag=1的，將flag的值變為1，認為需要代理到 b.tankhui.cn。

根據 flag的值判斷是否需要代理到 b.tankhui.cn

• 現在我改變不同的請求后台的url地址，發現,只有 帶有flag=1的請求，才會被代理到b.tankhui.cn, 並能在b.tankhui.cn 的nginx訪問日志中看到。

改變 url的值，請求文件和flag不同

url='http://a.tankhui.cn/newTest.php?flag=1'

url = 'http://a.tankhui.cn/test.php'

b.tankhui.cn nginx日志

• 這樣就可以將特定的請求代理到其他網站，實現跨域訪問。