Ajax實現跨域請求是在當前網頁中通過發(fā)送Ajax請求向不同域名的服務器獲取數據的一種方法。由于瀏覽器的同源策略限制,Ajax請求默認是不能跨域發(fā)送的,但可以通過配置請求頭來實現跨域。
使用Ajax實現跨域請求可以方便地獲取其他域名下的數據,比如獲取其他網站的最新新聞、天氣信息等。例如,我們可以通過在自己的網站上發(fā)送Ajax請求到天氣數據提供商的服務器,獲取最新的天氣信息并在自己的網站上展示。
要實現跨域請求,首先需要在服務器端進行一些配置。例如,可以在服務器端添加Access-Control-Allow-Origin響應頭,用于指明哪些域名可以訪問該服務器資源。如果服務器配置的是"*",則表示任何域名都可以訪問。比如:
Access-Control-Allow-Origin: https://www.example.com
這樣配置之后,https://www.example.com這個域名下的網頁就可以通過Ajax請求訪問該服務器資源了。
在前端使用Ajax發(fā)送跨域請求時,需要設置xhr對象的withCredentials屬性為true,以便在發(fā)送請求時攜帶跨域憑證信息(例如Cookie)。例如:
var xhr = new XMLHttpRequest(); xhr.withCredentials = true; xhr.open('GET', 'https://www.example.com/api/data', true); xhr.send();
上述代碼中,通過將withCredentials屬性設置為true,使得Ajax請求能夠在發(fā)送時攜帶與當前網頁關聯的憑證信息。
另外,還可以通過在服務器端添加Access-Control-Allow-Headers響應頭來指定允許的自定義請求頭。例如,我們可以在服務器端配置允許前端發(fā)送的自定義請求頭X-Requested-With。服務器的配置如下:
Access-Control-Allow-Headers: X-Requested-With
這樣,在前端發(fā)送Ajax請求時設置X-Requested-With請求頭,服務器端就會返回響應,從而完成跨域請求。例如:
var xhr = new XMLHttpRequest(); xhr.open('GET', 'https://www.example.com/api/data', true); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); xhr.send();
以上代碼中,我們自定義了一個名為X-Requested-With的請求頭,并在發(fā)送Ajax請求時通過setRequestHeader方法設置了該請求頭。當服務器端接收到帶有該請求頭的跨域請求時,會返回相應的數據。
總結來說,通過Ajax實現跨域請求需要在服務器端進行配置,包括設置Access-Control-Allow-Origin和Access-Control-Allow-Headers響應頭。在前端發(fā)送跨域請求時,需要設置xhr對象的withCredentials屬性為true,并通過setRequestHeader方法設置自定義請求頭。