前后端项目中跨域问题
什么是跨域:
跨域是什么?瀏覽器從一個域名的網頁去請求另一個域名的資源時,域名、端口、協議任一不同,都是跨域 .我們們是采用前后端分離開發的,也是前后端分離部署的,必然會存在跨域問題。 怎么解決跨域?很簡單,只需要在controller類上添加注解@CrossOrigin 即可!這個注解其實是CORS的實現。 CORS(Cross-Origin Resource Sharing, 跨源資源共享)是W3C出的一個標準,其思想是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通,從而決定請求或響應是應該成功,還是應該失敗。因此,要想實現CORS進行跨域,需要服務器進行一些設置,同時前端也需要做一些配置和分析。
為什么會有跨域:
在前后端分離的模式下,前后端的域名是不一致的,此時就會發生跨域訪問問題。在請求的過程中我們要想回去數據一般都是post/get請求,所以…跨域問題出現
跨域問題來源于JavaScript的同源策略,即只有 協議+主機名+端口號(如存在)相同,則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源,不能訪問和操作其他域下的資源。跨域問題是針對JS和ajax的,html本身沒有跨域問題,比如a標簽、script標簽、甚至form標簽(可以直接跨域發送數據并接收數據)等
同源策略:
1995年,同源政策由 Netscape 公司引入瀏覽器。目前,所有瀏覽器都實行這個政策。
最初,它的含義是指,A網頁設置的 Cookie,B網頁不能打開,除非這兩個網頁"同源"。所謂"同源"指的是"三個相同"。
協議相同域名相同端口相同舉例來說:
同源策略目的
同源政策的目的,是為了保證用戶信息的安全,防止惡意的網站竊取數據。
設想這樣一種情況:A網站是一家銀行,用戶登錄以后,又去瀏覽其他網站。如果其他網站可以讀取A網站的 Cookie,會發生什么?
很顯然,如果 Cookie 包含隱私(比如存款總額),這些信息就會泄漏。更可怕的是,Cookie 往往用來保存用戶的登錄狀態,如果用戶沒有退出登錄,其他網站就可以冒充用戶,為所欲為。因為瀏覽器同時還規定,提交表單不受同源政策的限制。
由此可見,"同源政策"是必需的,否則 Cookie 可以共享,互聯網就毫無安全可言了。
限制范圍
隨著互聯網的發展,"同源政策"越來越嚴格。目前,如果非同源,共有三種行為受到限制。
(1) Cookie、LocalStorage 和 IndexDB 無法讀取。(2) DOM 無法獲得。(3) AJAX 請求不能發送。雖然這些限制是必要的,但是有時很不方便,合理的用途也受到影。
所以正是瀏覽器為了數據的安全在訪問的方式上遵循了同源策論,但是在現在前后端分離的項目中,大都不是同源的,這就會產生跨域問題。
如何解決跨域問題:
前端訪問后端跨域問題
后端關閉同源策略:
在Controller層中添加@CrossOrigin注解,允許跨域訪問
使用前端工程配置代理來解決
JSONP
CORS
總結
以上是生活随笔為你收集整理的前后端项目中跨域问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: StringUtil中常用的方法
- 下一篇: 前端路由的概念与原理