記一次跨域問題的解決方案
阿新 • • 發佈:2019-02-14
一、背景
在公司空暇時間,筆者使用 AngularJS + SSM 方案編寫一套許可權控制系統。由於採用的是前後端分離的思想,前端頁面服務啟動的埠和後端服務啟動埠不一致導致請求跨域問題的出現。在此,寫下解決問題的流程。
二、基礎知識
2.1 什麼是同源
URL 由協議、域名、埠和路徑組成,如果兩個 URL 的協議、域名和埠相同,則表示它們同源。
2.2 什麼是同源策略
瀏覽器的同源策略,限制了來自不同源的 document 或指令碼,對當前 document 讀取或設定某些屬性。其目的是為了保證使用者資訊的安全,防止惡意的網站竊取資料。
另外,同源策略只對網頁的 HTML 文件做了限制,對載入的其他靜態資源如 javascript、css、圖片等仍然認為屬於同源。
2.3 什麼是跨域
跨域,指的是瀏覽器不能執行其他網站的指令碼。同源策略規定,AJAX 請求只能發給同源的網址,否則就報錯。
建議讀者先瀏覽文章末尾提供的參考資料進一步瞭解跨域相關的內容,再結合本文案例思考和理解
三、解決案例
CORS 是一個 W3C 標準,全稱是”跨域資源共享”(Cross-origin resource sharing)。它允許瀏覽器向跨源伺服器,發出 XMLHttpRequest 請求,從而克服了 AJAX 只能同源使用的限制。
筆者採用 CORS 方案解決問題。
3.1 前端頁面設定
3.1.1 設定請求引數
在 ajax 請求引數中新增 2 個引數設定: