使用CORS解決跨域問題

2021-10-01 19:54:35 字數 2577 閱讀 1431

先說跨域,跨域是指跨網域名稱(通訊協議+網域名稱+埠)的訪問,也就是說通訊協議、網域名稱、埠這三者中有一樣不同就屬於跨域;而跨域不一定會產生跨域問題,跨域問題的產生是瀏覽器對於ajax請求的一種安全限制,乙個頁面發起的請求必須是與當前網域名稱一樣,否則,會產生跨域問題

access to xmlhttprequest at 'http://localhost:8089/api/user/list?key=&page=1&rows=5' from origin '' has been blocked by cors policy: no 'access-control-allow-origin' header is present on the requested resource.
以上資訊是在chrome的開發者工具中獲取的,顯示的就是乙個跨域問題的錯誤,錯誤產生的原因是前端專案部署的網域名稱為sea.com,而在前端的專案中又去呼叫了部署網域名稱為localhost的後台介面,因此產生了跨域問題。

假設現在有乙個前後端分開部署的系統,前端專案部署稱為服務a,後端專案部署稱為服務b,前端會呼叫後端提供的介面,也就是服務a會訪問服務b,那麼服務a與服務b之間總結為有四種跨域的情況。

(1)協議不同,比如與

(2)網域名稱不同,比如www.baidu.com與www.qq.com;

(3)埠不同,比如www.csdn.com:8089與www.csdn.com:8080;

(4)二級網域名稱不同,blog.csdn.net與mp.csdn.net.

jsonp應該是最早的跨域問題解決方案了,它可以解決部分跨域問題,但是有其缺點。乙個比較明顯的缺點實只能傳送get請求,即使是在ajax中配置的是post請求,但如果是使用的jsonp,也會將post請求轉為get請求;另外,使用jsonp也需要後台服務的支援。

之前在做乙個專案前後端聯調時有用過nginx反向**解決跨域問題。使用nginx解決跨域問題的思想是讓nginx去**後端的服務,並提供與前端網域名稱相同的訪問入口,這樣讓前端的js「看起來」訪問的是自己的ip與埠,但實際上由於nginx做了**,其最後真正訪問的是另乙個位址。nginx也是目前非常流行的反向**與負載均衡的伺服器,許多網際網路專案中會用到它,當然解決跨域問題只是其功能的一部分。

cors(cross-origin resource sharing)是乙個w3c標準,全稱為「跨域資源共享」,是目前最為流行的跨域解決方案,配置簡單,使用方便,下面詳細介紹一下這個cors。

在前端這邊,使用ajax進行cors通訊與原有的寫法無任何區別,瀏覽器會自己處理(遠古瀏覽器不支援),處理的方式根據請求型別分為兩種,一種是在「普通請求」的情況下,「普通請求」需要滿足以下條件:

(1)請求的方式為head、get、post中的一種;

當請求為「普通請求」時,會在request headers中攜帶乙個origin的引數,這乙個引數的值為當前請求所屬的域(通訊協議+ 網域名稱+埠),伺服器端根據這個值判斷是否允許訪問(是否允許訪問的值由伺服器端的開發人員編寫)。如果伺服器端允許該域的訪問,會在response headers攜帶以下資訊,包括:

access-control-allow-credentials: true其中,access-control-allow-origin的值表示允許跨域訪問的位址,access-control-allow-credentials為true時表示允許攜帶cookie。

那麼,當請求不滿足「普通請求」時,瀏覽器則認為這是乙個「特殊請求」,「特殊請求」會在瀏覽器正式發起請求前,對目標服務發起一次「預檢」的請求,也就是向伺服器詢問我目前的域是否在可訪問伺服器的域列表中,如果不能,就會報錯。當然,如果每一次發起「特殊請求」都會去「詢問」伺服器是否可以訪問肯定是浪費資源,而且顯得很傻,那麼在服務端可以配置乙個有效時長的值,這乙個值的設定表示當允許這乙個域的訪問後,規定的時間範圍內,都是可以不經過「預檢」而進行訪問的。

在springmvc中有乙個org.springframework.web.cors.corsconfiguration的類,它實際上是乙個過濾器,我們只要按我們的需求去完善這乙個過濾器,並將過濾器註冊到spring中就可以了。在實際的環境中,我們一般把這乙個bean放到閘道器的服務中去,比如spring cloud的zuul閘道器服務。以下為模板**:

import org.springframework.context.annotation.bean;

import org.springframework.context.annotation.configuration;

import org.springframework.web.cors.corsconfiguration;

import org.springframework.web.cors.urlbasedcorsconfigurationsource;

import org.springframework.web.filter.corsfilter;

@configuration

public class corsconfig

}

使用CORS解決跨域問題

一 產生跨域的原因 瀏覽器會向伺服器傳送乙個option方法的預檢請求,如果伺服器拒絕響應,瀏覽器就無法訪問。因此我們可以針對option請求來處理跨域問題。二 解決辦法 在spingboot中針對option請求新增乙個准入機制 public static void main string arg...

cors解決跨域問題

cors是乙個w3c標準,全稱是 跨域資源共享 cross origin resource sharing 它允許瀏覽器向跨源伺服器,發出xmlhttprequest請求,從而克服了ajax只能同源使用的限制。cors需要瀏覽器和伺服器同時支援。目前,所有瀏覽器都支援該功能,ie瀏覽器不能低於ie1...

CORS解決跨域問題

在前後端分離的背景下,我想大部分人都有過跨域問題,那我們先來了解一下什麼是跨域問題。當乙個資源從與該資源本身所在的伺服器不同的域 協議或埠請求乙個資源時,資源會發起乙個跨域http請求。例子 當遊覽器從a網域名稱的網頁,去請求b網域名稱的資源時,網域名稱 埠 協議任一不同,都是跨域。ajax suc...