瀏覽器跨域問題

2022-06-17 22:30:15 字數 3816 閱讀 3088

跨域原因說明

示例網域名稱不同

www.jd.comwww.taobao.com

網域名稱相同,埠不同

www.jd.com:8080www.jd.com:8081

二級網域名稱不同

item.jd.commiaosha.jd.com

如果網域名稱和埠都相同,但是請求路徑不同,不屬於跨域,如:

http和https也屬於跨域

而我們剛才是從manage.leyou.com去訪問api.leyou.com,這屬於二級網域名稱不同,跨域了。

乙個頁面發起的ajax請求,只能是與當前頁網域名稱相同的路徑,這能有效的阻止跨站攻擊。

因此:跨域問題 是針對ajax的一種限制

目前比較常用的跨域解決方案有3種:

nginx反向**

思路是:利用nginx把跨域反向**為不跨域,支援各種請求方式

缺點:需要在nginx進行額外配置,語義不清晰

不符合devops思想:

devops(development和operations的組合詞)是一組過程、方法與系統的統稱,用於促進開發(應用程式/軟體工程)、技術運營和質量保障(qa)部門之間的溝通、協作與整合。

它是一種重視「軟體開發人員(dev)」和「it運維技術人員(ops)」之間溝通合作的文化、運動或慣例。透過自動化「軟體交付」和「架構變更」的流程,來使得構建、測試、發布軟體能夠更加地快捷、頻繁和可靠。

它的出現是由於軟體行業日益清晰地認識到:為了按時交付軟體產品和服務,開發和運維工作必須緊密合作。

cors

規範化的跨域請求解決方案,安全可靠。

優勢:缺點:

我們這裡會採用cors的跨域方案。

cors是乙個w3c標準,全稱是"跨域資源共享"(cross-origin resource sharing)。

它允許瀏覽器向跨源伺服器,發出xmlhttprequest請求,從而克服了ajax只能同源使用的限制。

cors需要瀏覽器和伺服器同時支援。目前,所有瀏覽器都支援該功能,ie瀏覽器不能低於ie10。

瀏覽器會將ajax請求分為兩類,其處理方案略有差異:簡單請求、特殊請求。

簡單請求

只要同時滿足以下兩大條件,就屬於簡單請求。:

(1) 請求方法是以下三種方法之一:

(2)http的頭資訊不超出以下幾種字段:

當瀏覽器發現發起的ajax請求是簡單請求時,會在請求頭中攜帶乙個字段:origin.

origin中會指出當前請求屬於哪個域(協議+網域名稱+埠)。服務會根據這個值決定是否允許其跨域。

如果伺服器允許跨域,需要在返回的響應頭中攜帶下面資訊:

access-control-allow-origin: 

access-control-allow-credentials: true

content-type: text/html; charset=utf-8

有關cookie:

要想操作cookie,需要滿足3個條件:

5.3.2.2.特殊請求

不符合簡單請求的條件,會被瀏覽器判定為特殊請求,,例如請求方式為put。

預檢請求

特殊請求會在正式通訊之前,增加一次http查詢請求,稱為"預檢"請求(preflight)。

瀏覽器先詢問伺服器,當前網頁所在的網域名稱是否在伺服器的許可名單之中,以及可以使用哪些http動詞和頭資訊字段。只有得到肯定答覆,瀏覽器才會發出正式的xmlhttprequest請求,否則就報錯。

乙個「預檢」請求的樣板:

與簡單請求相比,除了origin以外,多了兩個頭:

預檢請求的響應

服務的收到預檢請求,如果許可跨域,會發出響應:

除了access-control-allow-originaccess-control-allow-credentials以外,這裡又額外多出3個頭:

如果瀏覽器得到上述響應,則認定為可以跨域,後續就跟簡單請求的處理是一樣的了。

雖然原理比較複雜,但是前面說過:

事實上,springmvc已經幫我們寫好了cors的跨域過濾器:corsfilter ,內部已經實現了剛才所講的判定邏輯,我們直接用就好了。

leyou-gateway中編寫乙個配置類,並且註冊corsfilter:

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 leyoucorsconfig

}

瀏覽器跨域問題

就是瀏覽器在執行js時,會看這個js檔案屬於哪個站點,它只能在指令碼操作本站點,比如從傳來的js檔案,它就只能向傳送請求,沒有為什麼,這是瀏覽器強制規定的,你要用瀏覽器就必須遵循 1.傳輸協議一樣,也就是http這裡 2.網域名稱一樣,也就是www.asd.com,注意localhost和127.0...

瀏覽器跨域

前端部分,簡單的封裝乙個promise版的ajax let myajax function headers else xhr.open method,path for let key,value of object.entries headers xhr.send body myajax heade...

瀏覽器跨域

同源策略 同源策略是乙個重要的安全策略,它用於限制乙個origin的文件或者它載入的指令碼如何能與另乙個源的資源進行互動。它能幫助阻隔惡意文件,減少可能被攻擊的媒介。協議 網域名稱 埠號 http伺服器,預設的埠號為80 tcp 木馬executor開放此埠 https securely trans...