ajax跨域問題

2021-09-28 18:19:47 字數 3961 閱讀 5387

首先什麼是跨域,產生跨域的條件是什麼。

在軟體的開發過程中,我們可能會遇到這這樣的問題,瀏覽器會報這樣的錯誤。

這種其實就是跨域問題,但是,是什麼原因造成的這個問題呢,造成這個問題有三種方式,如下

請求的埠和當前伺服器不同

例如localhost:8080和localhost:8081

請求屬於同一網域名稱下,但是二級網域名稱不同

例如new.baidu.com和api.baidu.com

請求的網域名稱完全不同

www.baidu.com和google.com

協議不同

http與https

其實瀏覽器只是限制ajax跨域,而其它一些標籤並沒有限制,例如a標籤img標籤script等帶資源路徑的標籤,為什麼限制ajax呢,其實這是瀏覽器考慮的使用者的安全而限制的,當我們在瀏覽器輸入url的時候,為什麼不限制我們訪問,但是在ajax發請求的時候限制呢,試想一下,當有黑客在**種下惡意**的時候,種下了乙個指令碼,當你登入的時候,這個指令碼就觸發了,如果沒有跨域的限制,就會將你在本**的cookie資訊通過ajax傳送到他自己的伺服器,就相當於他得到了你的cookie,那麼他就可以拿你的cookie資訊去這個**登入,做一些非法的事情,這是非常危險的,竊取了你的私人資訊。

跨域的操作就意味著a**可以操作b**的頁面 這個有無窮的風險 凡是b**上登入確認身份之後不需要進一步驗證就可以操作的都有被a**利用的可能 ,很有可能在無意間,a**就修改了b**的資料

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

伺服器**

方向**

源a上的乙個頁面:

源b上的乙個資源:

源a上的這個頁面要請求源b上的這個資源,直接請求肯定是不行的,所以我們在源a的伺服器上虛擬出這樣乙個服務位址,假裝我們提供這樣乙個服務,

但是其實我們偷偷的把這個位址對映到 上面去了

這時候,源a的頁面是請求 這個服務,源a伺服器實際是向 介面請求,然後把資料返回給前端

websocket

cors

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

優勢: 缺點:

我們這裡會採用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動詞和頭資訊字段。只有得到肯定答覆,瀏覽器才會發出正式的ajax請求,否則就報錯。

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

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

預檢請求的響應

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

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

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

在後台新增配置類

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

globalcorsconfig

}

ajax跨域問題

ajax跨域和js的跨域通訊 cross the site 的幾種解決方案 1.什麼引起了ajax跨域不能的問題 ajax本身實際上是通過xmlhttprequest物件來進行資料的互動,而瀏覽器出於安全考慮,不允許js 進行跨域操作,所以會警告。2.有什麼完美的解決方案麼?沒有。解決方案有不少,但...

Ajax跨域問題

跨域是指跨網域名稱的訪問,以下情況都屬於跨域 跨域原因說明 示例網域名稱不同 www.jd.com與www.taobao.com 網域名稱相同,埠不同 www.jd.com 8080與www.jd.com 8081 二級網域名稱不同 item.jd.com與miaosha.jd.com 如果網域名稱...

AJAX跨域問題

前後端分離開發的模式下,存在前端頁面只能請求同乙個域下的後端介面,如果不是同乙個域,就會產生跨域問題。1.瀏覽器限制,並而不是伺服器後台不允許呼叫。2.跨域 協議,網域名稱 ip 埠,任何乙個不一樣,瀏覽器就會認為是跨域 3.我們傳送的是xhr xmlhttprequest請求 1.瀏覽器限制 我們...