溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關Ajax跨域問題如何解決，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
跨域
跨域有三個條件，滿足任何一個條件就是跨域
1：服務器端口不一致
2：協議不一致
3：域名不一致
解決方案：
1.jsonp
在遠程服務器上設法動態的把數據裝進js格式的文本代碼段中，供客戶端調用和進一步處理；在前臺通過動態添加script標簽及src屬性，表面看上去與ajax極為相似，但是，這和ajax并沒有任何關系；為了便于使用及交流，逐漸形成了一中非正式傳輸協議，人們把它稱作 jsonp 。
代碼如下：
html：
<body>
<form action="/" method="post" enctype="multipart/form-data">
<input type="text" name="xinxi" id="info"><br>
<input type="file" name="file" id="file"><br>
<input type="button" value="提交" name="submit" id="btn">
</form>
</body>
<script src="./jquery.js"></script>
<script>
//提前寫好函數，調用函數需要傳參
function callback(data){
alert(data);
}
//動態添加script標簽及src屬性
$('#btn').on('click',function(){
var sc = document.createElement('script');
sc.src = 'http://soul:8888/kuayu?cb=callback';
$('head').append(sc);
})
</script> js：
var http = require('http');
var url = require('url');
var server = http.createServer();
server.listen('8888',function(){
console.log('8888');
});
server.on('request',function(req,res){
var urls = url.parse(req.url,true);
if(urls.pathname == '/kuayu'){
res.end('callback("jsonp")');//返回的數據需是前端定義的函數調用的形式
}
});運行結果：
總結一下：
jsonp的一個要點就是允許用戶傳遞一個callback參數給服務端， 然后服務端返回數據時會將這個callback參數作為函數名來包裹住JSON數據， 這樣客戶端就可以隨意定制自己的函數來自動處理返回數據了。
發現凡是擁有"src"這個屬性的標簽都擁有跨域的能力，比如script、img、iframe； src 的能力就是把遠程的數據資源加載到本地(圖片、JS代碼等);
2.cors
cors跨域的核心點是在服務端代碼中設置一個響應頭即可
res.setHeader('Access-Control-Allow-Origin','*');
html：
<body>
<form action="/" method="post" enctype="multipart/form-data" id="form">
<input type="text" name="xinxi" id="info"><br>
<input type="button" value="提交" name="submit" id="btn">
</form>
</body>
<script src="./jquery.js"></script>
<script>
$('#btn').on('click', function () {
$.ajax({
url: 'http://soul:8888/kuayu',
type:'delete',
async:false,
success: function (data) {
alert(data);
},
})
})
</script>js代碼：
<body>
<form action="/" method="post" enctype="multipart/form-data" id="form">
<input type="text" name="xinxi" id="info"><br>
<input type="button" value="提交" name="submit" id="btn">
</form>
</body>
<script src="./jquery.js"></script>
<script>
$('#btn').on('click', function () {
$.ajax({
url: 'http://soul:8888/kuayu',
type:'delete',
async:false,
success: function (data) {
alert(data);
},
})
})
</script>效果：
很多人也認為使用CORS解決跨域很簡單，只需要在服務器添加響應頭 “ Access-Control-Allow-Origin ：* ” 就可以了，
其實不然，因為在CORS中，所有的跨域請求被分為了兩種類型，一種是簡單請求，一種是復雜請求 (嚴格來說應該叫‘需預檢請求')；簡單請求與普通的ajax請求無異；但復雜請求，必須在正式發送請求前先發送一個OPTIONS方法的請求已得到服務器的同意，若沒有得到服務器的同意，瀏覽器不會發送正式請求；
滿足以下所有條件，被視為簡單類型的請求：
1：請求方法必須是 GET、HEAD、POST中的一種，其他方法不行；
2：請求頭類型只能是 Accept、Accept-Language、Content-Language、Content-Type，添加其他額外請求頭不行；
3：請求頭 Content-Type 如果有，值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一種，其他值不行；
4：請求中的任意 XMLHttpRequestUpload 對象均沒有注冊任何事件監聽器；
5：請求中沒有使用 ReadableStream 對象。（以上摘自西嶺老濕微信公眾號）
總結一下：
如果請求方式為get和post簡單請求，則只需要設置響應頭：res.setHeader('Access-Control-Allow-Origin','*');來允許某一個域 或者 所有域進行數據共享；
若是其他方式的請求，會在發送真正的請求之前發送一個options請求，通過options請求里設置：res.setHeader('Access-Control-Allow-Methods', 'DELETE')，
告知服務器正式請求會使用哪一種 HTTP 請求方法。
上述就是小編為大家分享的Ajax跨域問題如何解決了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
