ajax跨域簡介

什麼是跨域

跨域：兩個網站之間協定頭、域名、端口号任意一個不同就是跨域。

同源：兩個網站之間協定頭、域名、端口号都一緻就是同源。

有時，我們使用ajax通路一個api，不能通路成功，并且報錯，如下。

此時，我們已經是跨域通路了，但是我們仍要通路，那麼怎麼解決呢。

跨域解決方案——jsonp

常見的跨域解決方案是jsonp，該方法比較簡單，不涉及太多後端的知識。

首先我們了解一下jsonp解決跨域的原理

jsonp原理

jsonp原理是使用不受跨域限制的标簽發起請求，然後再将響應體轉換為js能夠識别的内容。能夠跨域發送請求的标簽有，link，script，img等，但是link、img會分别将響應體以樣式表和圖檔進行解析，得不到我們想要的内容，那麼script能夠将響應體以js格式進行解析，最終得到我們想要的内容。接下來，就是具體步驟。

1. 建立一個函數，并給該函數一個參數用來接收響應體，該函數用于對響應體進行操作。

function handle(response){
console.log(response);
}
           

1. 使用script标簽發送請求，并将函數名作為參數傳入

1. 在聲明的函數中對響應結果進行操作

function handle(response){
console.log(response.result);
}
           

跨域請求成功，此方法可以解決跨域問題。

跨域資源共享

跨域資源共享也可以解決跨域問題

該方法主要是在後端請求頭中添加Access-Control-Allow-Origin：*

此處以php檔案進行模拟

<?php
header("Access-Control-Allow-Origin：*");
           

添加如上代碼後，就可以在前端頁面中發起跨域請求

此外，還可以使用jQuery中的getJSON方法實作跨域請求

jQuery.getJSON

$.getJSON("https://api.jisuapi.com/astro/all?&callback=?", {
       appkey: "cdd63426d9c555c0"
   }, function(res) {
       console.log(res);
   });
           

此時，我們成功擷取資料，以上就是跨域請求的一些方法。