使用JS怎樣實現最簡單的跨域

這次帶給大家使用JS怎樣實現最簡單的跨域，使用JS實現最簡單的跨域注意事項有哪些，下面就是實戰案例，一起來看一下。

有一天有人跑來跟我定方案，問我cors是什麼原理，一臉懵逼，跨域我只知道jsonP啊，眼看一個裝逼的機會就要失去了。
「我現在有點忙，待會找你」。
機智的我馬上回到工位，百度百度。

同源策略

老生常談了，不是我家的人，東西當然不能讓你隨便亂動。
非同源的腳本不能存取或操作其他網域的頁面物件(如DOM等)，同源策略要求三同, 即: 同域, 同協定, 同連接埠。

跨域方法

本文只介紹jsonP和cors。

jsonP

<!-- 开发环境版本，包含了用帮助的命令行警告 --><script></script>

這是在vue文件中引入vue.js的方法，可以看到script標籤可以直接去請求其他網域的JS檔。既然這樣，我們就能使用這個特性來實現跨域。

搭個簡單伺服器

用nodejs express搭個簡單伺服器。幾行程式碼足矣。

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  console.log('user');
  res.send(‘success’);
})
app.listen(3000,()=>{  console.log('start');
});

啟動伺服器。然後寫個測試函數，先試試ajax。

function getUserAjax(){  let xhr= new XMLHttpRequest();
  xhr.open("GET","http://127.0.0.1:3000/user",true);
  xhr.send();
}

在chrome控制台下執行getUserAjax函數。

可以看到被拒絕了，瀏覽器沒有成功拿到success。這時候就需要用到jsonP了。因為script標籤本身就是可以跨網域請求JS檔的。

function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user";  document.body.appendChild(dom);
}

控制台下執行getUser()。

success沒有定義。可見瀏覽器已經跨域獲取到了‘success’。因為script標籤載入的JS會立刻執行，而success沒有被定義，所以報了這個錯誤。這時候已經很明了。前端發送請求時將函數名稱,例如callback傳給後台，後台再傳回這個函數，callback(info)。這樣瀏覽器接受到資料後，會馬上執行callback函數，就像回呼函數一樣。馬上開始改裝：
前端程式碼：

function callback(info){
  alert(info);
}function getUser(){  let dom = document.createElement('script');
  dom.src = "http://127.0.0.1:3000/user?callback=callback";  //url上指明回调函数的名字
  document.body.appendChild(dom);
}

後台程式碼：

const express = require('express');const app = express();
app.get('/user',(req,res)=>{  let func = req.query.callback;
  res.send(func+'(' + '"success"'+')');
});
app.listen(3000,()=>{  console.log('start');
});

再次執行getUser();成功彈出了success。這就是jsonP的原理。後台回傳一個JS函數，帶著參數，呼叫前端準備好的函數。即實現了發送請求和回呼函數的效果。

cors

這個就更簡單了。上面ajax跨域的時候報了這個錯誤 No 'Access-Control-Allow-Origin' header is present on the requested resource。
那伺服器回傳的時候帶上‘'Access-Control-Allow-Origin' 就好了。他的意思是允許哪些來源的請求。你雖然不是我家的人，但這次我信任你，給你一把鑰匙。
改裝下後台程式碼：

const express = require('express');const app = express();
app.get('/user',(req,res)=>{
  res.header("Access-Control-Allow-Origin", "*");  //设置返回数据的头，代表接受任意源的请求
  res.send('success');
});
app.listen(3000,()=>{
  console.log('start');
});

再在控制台呼叫上文的getUserAjax()。成功。前端都不用改代碼。不過要注意的是cors不是所有的瀏覽器都會支援。

jsonP和cors比較

cors與jsonP的使用目的相同，但比jsonP更強大。
jsonP只支援GET請求，cors支援所有類型的HTTP請求。 jsonP的優勢在於支援老式瀏覽器，以及可以向不支援cors的網站請求資料。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

js基礎提升學習之基本資料型別

#

怎麼利用JS自訂雜湊表和順序列表

#

以上是使用JS怎樣實現最簡單的跨域的詳細內容。更多資訊請關注PHP中文網其他相關文章！