這次帶給大家使用JS怎樣實現最簡單的跨域，使用JS實現最簡單的跨域注意事項有哪些，下面就是實戰案例，一起來看一下。
有一天有人跑來跟我定方案，問我cors是什麼原理，一臉懵逼，跨域我只知道jsonP啊，眼看一個裝逼的機會就要失去了。
「我現在有點忙，待會找你」。
機智的我馬上回到工位，百度百度。
同源策略
老生常談了，不是我家的人，東西當然不能讓你隨便亂動。
非同源的腳本不能存取或操作其他網域的頁面物件(如DOM等)，同源策略要求三同, 即: 同域, 同協定, 同連接埠。
跨域方法
本文只介紹jsonP和cors。
jsonP
<!-- 开发环境版本，包含了用帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></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中文網其他相關文章！
