本文目錄一覽:
如何用CORS來解決JS中跨域的問題
1、CORS的原理:CORS定義一種跨域訪問的機制,可以讓AJAX實現跨域訪問。CORS 允許一個域上的網絡應用向另一個域提交跨域 AJAX 請求。實現此功能非常簡單,只需由服務器發送一個響應標頭即可。
2、tomcat如何配置cors的跨域請求:
在tomcat中,有一個和cors相關的攔截器:CORS Filter
該過濾器可以通過添加必需的訪問控制請求頭Access-Control-*對象來進行跨域。同時還可以對一些請求進行攔截。如果請求是無效的,或者是不被允許的,該請求被拒絕或者禁止。
其在web.xml文件中的基本配置如下:
filter
filter-nameCorsFilter/filter-name
filter-classorg.apache.catalina.filters.CorsFilter/filter-class
init-param
param-namecors.allowed.origins/param-name
param-value
,
/param-value
/init-param
init-param
param-namecors.allowed.methods/param-name
param-value
GET,POST,HEAD,OPTIONS,PUT
/param-value
/init-param
init-param
param-namecors.allowed.headers/param-name
param-value
Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin
/param-value
/init-param
init-param
param-namecors.exposed.headers/param-name
param-value
Access-Control-Allow-Origin,Access-Control-Allow-Credentials
/param-value
/init-param
init-param
param-namecors.support.credentials/param-name
param-valuetrue/param-value
/init-param
init-param
param-namecors.preflight.maxage/param-name
param-value10/param-value
/init-param
/filter
filter-mapping
filter-nameCorsFilter/filter-name
url-pattern/wxrefund/*/url-pattern
/filter-mapping
3、cors.allowed.origins:允許訪問資源的源列表。*表示任何來源都可以訪問該資源。否則,只有配置的白名單的來源可以訪問該資源,其中白名單用逗號隔開,如。
4、cors.allowed.methods:允許訪問的http請求方法,如GET,POST,HEAD,OPTIONS,PUT等,方法名用逗號隔開。
5、cors.allowed.headers:在實際請求時可使用的請求頭列表,用逗號隔開。如Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers,Access-Control-Allow-Origin。這些頭也將返回作為訪問控制的一部分。
使用CORS解決跨域問題
跨域是指跨域名的訪問,以下情況都屬於跨域:
如果 域名和端口都相同,但是請求路徑不同 ,不屬於跨域,如:
跨域不一定會有跨域問題。
因為跨域問題是瀏覽器對於ajax請求的一種安全限制: 一個頁面發起的ajax請求,只能是於當前頁同域名的路徑 ,這能有效的阻止跨站攻擊。
因此: 跨域問題 是針對ajax的一種限制 。
但是這卻給我們的開發帶來了不變,而且在實際生成環境中,肯定會有很多台服務器之間交互,地址和端口都可能不同,怎麼辦?
目前比較常用的跨域解決方案有3種:
我們這裡會採用cors的跨域方案。
CORS是一個W3C標準,全稱是”跨域資源共享”(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務器,發出 XMLHttpRequest 請求,從而克服了AJAX只能 同源 使用的限制。
CORS需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低於IE10。
瀏覽器會將ajax請求分為兩類,其處理方案略有差異:簡單請求、特殊請求。
只要同時滿足以下兩大條件,就屬於簡單請求。:
(1) 請求方法是以下三種方法之一:
(2)HTTP的頭信息不超出以下幾種字段:
當瀏覽器發現發現的ajax請求是簡單請求時,會在請求頭中攜帶一個字段: Origin .
Origin中會指出當前請求屬於哪個域(協議+域名+端口)。服務會根據這個值決定是否允許其跨域。
如果服務器允許跨域,需要在返回的響應頭中攜帶下面信息:
注意:
如果跨域請求要想操作cookie,需要滿足3個條件:
不符合簡單請求的條件,會被瀏覽器判定為特殊請求,,例如請求方式為PUT。
特殊請求會在正式通信之前,增加一次HTTP查詢請求,稱為”預檢”請求(preflight)。
瀏覽器先詢問服務器,當前網頁所在的域名是否在服務器的許可名單之中,以及可以使用哪些HTTP動詞和頭信息字段。只有得到肯定答覆,瀏覽器才會發出正式的 XMLHttpRequest 請求,否則就報錯。
一個「預檢」請求的樣板:
與簡單請求相比,除了Origin以外,多了兩個頭:
服務的收到預檢請求,如果許可跨域,會發出響應:
除了 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 以外,這裡又額外多出3個頭:
如果瀏覽器得到上述響應,則認定為可以跨域,後續就跟簡單請求的處理是一樣的了。
雖然原理比較複雜,但是前面說過:
事實上,SpringMVC已經幫我們寫好了CORS的跨域過濾器:CorsFilter ,內部已經實現了剛才所講的判定邏輯,我們直接用就好了。
在 Application 下編寫一個配置類,並且註冊CorsFilter:
結構:
放到Application下即可。
4.5.4.重啟測試:
訪問正常:
SpringBoot進階之處理跨域問題(CORS)
大家好,一直以來我都本着 用最通俗的話理解核心的知識點, 我認為所有的難點都離不開 「基礎知識」 的鋪墊
「大佬可以繞過 ~」
如果你是一路看過來的,很高興你能夠耐心看完。之前帶大家學了 Springboot 基礎部分,對基本的使用有了初步的認識, 接下來的幾期內容將會帶大家進階使用,會先講解基礎 中間件 的使用和一些場景的應用,或許這些技術你聽說過,沒看過也沒關係,我會帶大家一步一步的入門,耐心看完你一定會有 收穫 ~
上期帶大家學習了 Springboot 中如何集成 MyBatis分頁插件PageHelper 以及它的一個基本使用, 本期將帶大家學習 SpringBoot 中如何處理跨域問題的,同樣的,我們集成到 Springboot 中。最近github可能會被牆,所以我把源碼放到了國內gitee上,本節我們依然使用上期的代碼
同樣的,為了照顧小白同學,依然先說一下啥是跨域。說到跨域問題,如果你是 前端 同學,肯定不會陌生, 你有可能調接口調着調着,發現請求發佈出去,控制台會報 CORS 錯誤, 這時候你會找後台老大哥給你處理一下。然而現在前端工程中,一般都會有 proxy代理 ,這樣也能解決問題,這只是本地調試,但上線還會有問題, 除非你發佈的時候你們是同一個 域 下。
好,說了這麼多,大概明白跨域是如何產生了,就是說前端調用的後端接口不屬於同一個 域(域名或端口不同) ,就會產生跨域問題,也就是說你的應用訪問了該應用域名或端口之外的域名或端口,這裡給大家總結一下,產生跨域的三個條件:
解決思路大致可以分為以下幾方面:
從源頭瀏覽器解決,解除跨域機制,用戶自己設置瀏覽器,這不大現實,好, pass
發送 JSONP 請求替代XHR請求,並不能適用所有的請求方式, 不推薦
之前我們提到前端本地工程開啟 Proxy ,那麼服務端可不可進行代理呢?答案是可以的,怎麼做?可以通過 nginx 進行代理,給大家簡單演示一下:
nginx 是當今比較火的 web 服務器,常用於服務代理, 等教大家部署的時候會講一下
這也是本節要講的內容,我們先不直接的給大家展示代碼,先說一下它的原理。
一般我們下載的瀏覽器比如 Chrome ,它都是自行默認開啟 跨域限制 的,那我們如何判斷我們發出去的請求是一個 跨域請求 呢,打開瀏覽器開發者工具,在請求的請求頭中就可以發現,如果不是一個跨域請求,它只有 Host ,如果是一個 跨域請求 它會多一個 Origin ,告訴瀏覽器我倆請求的地方不一樣
跨源資源共享(CORS) 是一種基於 HTTP頭 的機制,該機制通過允許服務器標示除了它自己以外的其它 origin(域,協議和端口 ),這樣瀏覽器就可以訪問加載這些資源。跨源資源共享還通過一種機制來檢查服務器是否會允許要發送的真實請求,該機制通過瀏覽器發起一個到服務器託管的跨源資源的 預檢(OPTION) 請求。在預檢中,瀏覽器發送的頭中標示有HTTP方法和真實請求中會用到的頭,那麼具體是怎麼設置 頭 的呢?
服務端通過設置如上,就可以進行跨域訪問了。好,有了基本的理論之後,我們一起看一下在 Springboot 中如何解決的:
是不是很簡單~ 它的實現機制主要是通過請求 攔截器 實現的,你慢慢會發現,隨着學習的深入,你會遇到各種 攔截器 技術
本期到這裡就結束了,總結一下,本節主要帶大家認識了什麼是 跨域 ,以及解決思路,最後教大家 Sprinboot 中是如何配置跨域訪問的,源碼已更新,大家可以自行試一下
【http】什麼是cors跨域
前端開發中,常常需要進行跨域請求。既然提到跨域,首先我們的知道什麼是「同源策略」。
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的關鍵的安全機制。
如果協議,端口(如果指定了一個)和域名對於兩個頁面是相同的,則兩個頁面具有相同的源。
同一個源內,資源的訪問是很自由的。就跟在自己家中,想開冰箱開冰箱,想幹啥幹啥。如果你想訪問不同源的資源,可就沒那麼自由了,這就是跨域。
關於跨域,常用的JSONP應該都知道。JSONP的原理是什麼呢?我們來看看大神賀師俊的解釋:
很簡單,就是利用script標籤沒有跨域限制的「漏洞」(歷史遺迹啊)來達到與第三方通訊的目的。當需要通訊時,本站腳本創建一個script元素,地址指向第三方的API網址,並提供一個回調函數來接收數據(函數名可約定,或通過地址參數傳遞)。 第三方產生的響應為json數據的包裝(故稱之為jsonp,即json padding),這樣瀏覽器會調用callback函數,並傳遞解析後json對象作為參數。本站腳本可在callback函數里處理所傳入的數據。
可以知道JSONP就是個bug般的存在啊,如果你是一個有潔癖的程序員回想說:這不合理,這部乾淨。因此我們引出cors。
那麼,什麼是cors呢?
我們來看看互動百科的解釋:
CORS(跨來源資源共享)是一份瀏覽器技術的規範,提供了Web服務從不同網域傳來沙盒腳本的方法,以避開瀏覽器的同源策略,是JSONP模式的現代版。
維基百科的解釋(手動谷歌):
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served.
這樣看來,其實嘛,cors就是一個規範,機制,基於這個規範,不同源之間才可以請求資源。相當於一個江湖規矩,大家都按規矩來嘛不是?不講規矩?信不信小拳拳捶你。
所以呢,要想使用cors跨域訪問,你就得講規矩。下面我們來看看有哪些規矩。
跨域資源共享標準( cross-origin sharing standard )允許在下列場景中使用跨域 HTTP 請求:
cors中有個術語叫 「簡單請求」 ,若請求滿足所有下述條件,則該請求可視為「簡單請求」:
使用下列方法之一:
之所以區分簡單請求,是因為cors需要處理一些「非簡單請求」,這種特殊處理叫做「預檢請求」。大人物來了,總要提前準備準備吧,封路啥的blabla。
預檢請求的作用是 提前獲知服務器是否允許該實際請求 。「預檢請求」的使用,可以 避免跨域請求對服務器的用戶數據產生未預期的影響 。
一張圖可以清晰看到提前發送預檢請求的cors請求
Request Headers:
Response Header:
cors在koa中的使用:
相關鏈接:
原創文章,作者:BKZK,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/144976.html