1. 程式人生 > >Nginx允許跨域訪問的配置問題

Nginx允許跨域訪問的配置問題

如今前後端分離的模式,越來越成為很多團隊的選擇,通過分離前後端的工作,是的雙方更能關注於自己核心的工作領域,只需要通過相應的API介面進行互動。

前後端工作的分離帶來的一個問題就是前後端在部署上分離的可能性,在部署上的分離又會觸發瀏覽器安全機制——同源策略,從而導致不能訪問非同域的資源。同樣要解決跨域訪問的問題,網上的解決方案也有很多,就是在跨域資源的響應中,加上允許跨域訪問頭資訊即可。

新增頭資訊有幾種方式:1.  直接修改程式碼,在HTTP響應中新增上對應的頭資訊;2. 使用代理伺服器,在代理伺服器返回響應的時候,再新增響應的頭資訊。

我們這裡選擇的是第2種方式——使用Nginx作為反向代理伺服器。在使用Nginx作為代理伺服器,並在配置中對應的location下新增上如下的設定:

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';

通過這兩個配置,前端就可以跨域訪問資料介面了。但是在後續的使用過程中遇到一個問題,就是簡單的GET請求都是可以跨域訪問到資料的,但是POST請求的時候瀏覽器依然報錯說跨域訪問被禁止。後來發現,是因為在POST請求時,處理資料過程中發生了異常,導致了瀏覽器報跨域訪問錯誤。但為什麼會這樣呢?

經查,這是因為Nginx的add_header指令並不能在HTTP返回碼為50X的時候起作用,由於伺服器處理邏輯出錯,導致了Nginx返回內部伺服器錯誤(500),這個時候add_header是沒有起作用的,故會出現這樣的問題。

大家可以參考這個Nginx文件:http://nginx.org/en/docs/http/ngx_http_headers_module.html