跨域與nginx實現

2021-09-24 21:51:45 字數 1182 閱讀 4191

簡單的說就是 瀏覽器在www.***x.com頁面訪問了別的 url(注:url由協議、網域名稱、埠和路徑組成).

比如瀏覽器頁面 時

我們訪問了以下url時都是跨域:

:9999

聽起來很正常的事情,我們為什麼要特地去「實現呢」.

這就要說到瀏覽器的通源策略了.

瀏覽器的同源策略,限制了來自不同源的」document」或指令碼,對當前」document」讀取或設定某些屬性。 從乙個域上載入的指令碼不允許訪問另外乙個域的文件屬性。

# 伺服器端設定請求頭access-control-allow-origin等請求頭:

access-control-allow-origin: 允許跨域訪問的域,可以是乙個域的列表,也可以是萬用字元"*"。這裡要注意origin規則只對網域名稱有效,並不會對子目錄有效。即 是無效的。但是不同子網域名稱需要分開設定,這裡的規則可以參照同源策略

access-control-allow-credentials: 是否允許請求帶有驗證資訊,這部分將會在下面詳細解釋

access-control-expose-headers: 允許指令碼訪問的返回頭,請求成功後,指令碼可以在xmlhttprequest中訪問這些頭的資訊(貌似webkit沒有實現這個)

access-control-max-age: 快取此次請求的秒數。在這個時間範圍內,所有同型別的請求都將不再傳送預檢請求而是直接使用此次返回的頭作為判斷依據,非常有用,大幅優化請求次數

access-control-allow-methods: 允許使用的請求方法,以逗號隔開

access-control-allow-headers: 允許自定義的頭部,以逗號隔開,大小寫不敏感

# options

當跨域請求發生時.

瀏覽器會自動先傳送乙個options方法的請求預檢.

我們要專門對options請求響應,告訴瀏覽器可以跨域訪問,  同時避免執行api介面.

# 注意

access-control-allow-origin 如果設定為全部域可以訪問,那所有重要資源都要做好安全校驗.因為這等於放棄了很大一部分瀏覽器同源策略的保護.

server 

# proxy_set_header host $host;

proxy_pass

}#......省略一萬字..........

}

nginx實現跨域訪問

簡單來說 兩個url只要協議 網域名稱 埠有任何乙個不同,都被當作是不同的域,相互訪問就會有跨域問題。例如 在開發前後端完全分離的系統中,服務端 屬於乙個工程,前端 屬於另乙個工程,前端開發人員在進行介面對接時,可能會在webstorm等工具進行編碼,並用webstorm的內建伺服器進行除錯,這就會...

Nginx 實現AJAX跨域請求

更多 最新的w3c標準裡是這麼實現http跨域請求的,cross origin resource sharing 簡單來說,就是跨域的目標伺服器要返回一系列的headers,通過這些headers來控制是否同意跨域。這些headers有 在 request 包和 response 包中都有一些。其中...

Nginx 實現AJAX跨域請求

ajax從乙個域請求另乙個域會有跨域的問題。那麼如何在nginx上實現ajax跨域請求呢?要在nginx上啟用跨域請求,需要新增add header access control 指令。如下所示 1 2 3 4 5 6 7 8 location 注釋如下 第一條指令 授權從url的請求,也可以 ad...