文章目錄
- 為什么會產生跨域問題
- 同源策略 （Same-origin policy）
- 解決方案
- 服務端解決方案
- 簡單請求
- 復雜請求
- 測驗
- 簡單請求測驗
- 復雜請求測驗
- 代理服務器，反向代理介面請求
- jsonp 方式
為什么會產生跨域問題
1995年，Netscape 公司出于安全的考慮在瀏覽器中引入了“同源策略”，
跨域問題只出現在瀏覽器訪問的頁面，因為這是瀏覽器為了保戶用戶安全而制造的策略，假如沒有這層保護，網站就很容易受到跨站偽造請求（CSRF）的攻擊，
同源策略 （Same-origin policy）
瀏覽器端對請求的處理中，如果兩個 URL 的協議、域名和埠都相同，我們就稱這兩個URL 同源
我們來舉幾個例子
同源
http://www.xxxx.com/index
http://www.xxxx.com/module/path1
非同源
http://www.xxxx.com/index
https://www.xxxx.com/module/path1
http://www.xxxx.com/index
http://www.yyyy.com/module/path1
http://www.xxxx.com/index
http://www.xxxx.com:8081/module/path1
兩個相同的源之間瀏覽器默認其是可以相互訪問資源和操作 DOM 的，兩個不同的源之間若想要相互訪問資源或者操作 DOM，那么會有一套基礎的安全策略的制約，
- 安全性： 瀏覽器要防止當前站點的私密資料不會向其他站點發送
如當前站點的Cookie,LocalStorage,IndexDb 不會被發送到其他站點或被其他站點腳本讀取到，
無法跨域獲取Dom，無法發送Ajax請求，
- 可用性：大型站點的圖片，音視頻等資源，希望部署在獨立服務器上，為緩解當前服務的壓力，開放某些特定的方式，訪問非同源站點
如：
<script><img><iframe><link><vedio>等，可以同src屬性跨域訪問 允許跨域提交表單/或重定向請求
解決方案
服務端解決方案
跨域請求分兩種情況
簡單請求
- 請求方法使用GET/HEAD/POST請求之一
- 僅能使用CORS安全的頭部，Accept,Accept-Language, Content-Language,Content-Type
- Content-Type的值只能是：text/plain,multipart/form-data,application/x-www-form-urlencoded三者其中之一
請求從domain a 發過來， 請求到web domain b , 如果這個時候domain b 回傳一個允許，可以解決這個問題，
服務端解決方案： 在http回應頭中添加 Access-Control-Allow-Origin 頭，值為信任的站點
復雜請求
不符合簡單請求條件的即為復雜請求，訪問跨域資源前，需要發起preflight預檢請求（OPTIONS請求）詢問何種請求是被允許的，預檢請求失敗，則不會發起正式的業務請求，預檢請求成功，然后發起正式請求，
測驗
隨便寫個spring boot 的工程，啟動2個埠 一個8080 一個8081 ，訪問8080的頁面，呼叫8081的后臺服務 ， 用來測驗
簡單請求測驗
來看第一個
CASE1: 【GET請求】
點擊訪問
服務端后臺的代碼
添加
response.addHeader("Access-Control-Allow_origin","http://localhost:8080");
重啟后， 重新測驗
CASE2: 【表單請求】
目前的后端代碼
來 測驗走一波
重啟重新測驗 ， OK
復雜請求測驗
【復雜請求】
和上面Case2的請求一模一樣，除了 Content-Type , 那 還能用上面的添加回應頭解決嗎？
答案是不能的，，，，，
我們用wireshark來跟蹤下 option 預檢的 請求
Spring Boot 官方給出了解決方案
我們就看全域的這個配置吧
請求下 跟蹤下
good
代理服務器，反向代理介面請求
location /api {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://localhost:8081/;
}
說一下為什要rewrite， 因為 api 這個前綴僅僅用于前臺頁面發請求時候攜帶， 后臺并沒有 api這個context， 所以需要在nnginx 通過rewrite機制來將api 替換掉 ，
rewrite ^/api/(.*)$ /$1 break;
這個就是 一 /api開頭的請求， 替換為 $1 ， 這個$1就是 請求中/api后面的內容， break 即為 匹配到則不往后面找了，
jsonp 方式
基于
可用性：大型站點的圖片，音視頻等資源，希望部署在獨立服務器上，為緩解當前服務的壓力，開放某些特定的方式，訪問非同源站點 ，
如：<script><img><iframe><link><vedio>等，可以同src屬性跨域訪問 允許跨域提交表單/或重定向請求
后臺代碼
測驗走一波
了解下就行了，實際中很少會用到jsonp來解決跨域問題
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/259171.html
標籤：其他