跨域
什么是跨域
跨域主要由于不符合瀏覽器的同源策略所產生的一種現象，同源策略屬于瀏覽器的一種安全策略，其要求是所請求資源的協議、域名、埠號與當前頁面完全一致，目的是為了保護本地資料不被請求獲取的資料污染，如果缺少了同源策略，瀏覽器很容易受到XSS、CSRF等攻擊，因此同源策略攔截的是請求回傳來的資料，即服務器回應了，但是回應的結果被瀏覽器攔截了，
瀏覽器采用同源策略，在沒有明確授權的情況下，禁止頁面加載或執行與自身不同源的任何腳本，
同源策略限制的內容
- cookie、localStorage、indexDB等存盤性內容，cookie只和域名以及路徑關聯，localStorage則是以源為單位進行管理，相互獨立
- 禁止對不同源頁面DOM進行操作，主要場景是iframe跨域
- ajax請求前后端分離的情況
允許跨域加載資源的標簽
- img-src
- link-href
- script-src
- iframe-src
常見的解決跨域的方法
-
JSONP(JSON with Padding)
只支持get請求，利用了script標簽可獲取跨域資源的特點，可跨域的標簽還有img、link、iframe、script等，
具體操作：服務端的回應內容是js代碼，回傳的是函式呼叫，并把引數傳遞進去，瀏覽器對此代碼進行決議并執行，對應的函式宣告由前端自己定義，
-
CORS(Cross-Origin Resource Sharing)
跨域資源共享是一種基于 HTTP 頭的機制，該機制通過允許服務器標示除了它自己以外的其它源（域、協議和埠），使得瀏覽器允許這些 origin 訪問加載自己的資源，
此機制新增了一組HTTP首部欄位（header）來解決跨域問題，允許服務器宣告哪些源站通過瀏覽器有權限訪問哪些資源，
這個方法主要需要后端介面做處理，使回應報文包含正確的CORS回應頭，如：
response.setHeader('Access-Control-Allow-Origin', '*'); // 允許的請求來源 response.setHeader('Access-Control-Allow-Headers', '*'); // 允許攜帶的頭資訊，用于預檢請求的回應 response.setHeader('Access-Control-Allow-Methods', '*'); // 允許的請求型別，用于預檢請求的回應 response.setHeader('Access-Control-Expose-Headers', 'token'); // 允許瀏覽器可以拿到的自定義回應頭 -
代理跨域
前端本地開發通常會使用這種解決跨域的方法，
比如使用Webpack作為構建工具時，可以對
devServer.proxy進行代理配置，使滿足特定規則的請求，被轉發到真實的介面地址，相當于給真實的介面做了一層代理，module.exports = { // ... devServer: { proxy: { '/api': { target: 'http://www.example.com', pathRewrite: { '^/api': '' } } } } };假設此時在A頁面
http://locahost:8080/index.html發起了一個請求http://localhost:8080/api/getList，請求實際會被轉發至http://www.example.com/getList
本文來自博客園，作者：beckyye，轉載請注明原文鏈接：https://www.cnblogs.com/halftonine/p/16968946.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/539629.html
標籤：其他