跨域
跨域有三個條件，滿足任何一個條件就是跨域
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：
1 var http = require('http');
2 var url = require('url');
3 var server = http.createServer();
4 server.listen('8888',function(){
5 console.log('8888');
6 });
7 server.on('request',function(req,res){
8 var urls = url.parse(req.url,true);
9 if(urls.pathname == '/kuayu'){
10 res.end('callback("jsonp")');//傳回的資料需是前端定義的函數調用的形式
11 }
12 }); 運作結果：
總結一下：
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代碼：
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){
// 允許所有請求域
// res.setHeader('Access-Control-Allow-Origin','*');
// 隻允許具體的一個域進行資料共享
// res.setHeader('Access-Control-Allow-Origin','http://127.0.0.1:8000');
var urls = url.parse(req.url,true);
res.setHeader('Access-Control-Allow-Origin','*');
if(req.method == 'POST' || req.method == 'GET'){
if(urls.pathname == '/kuayu'){
res.end('hello,world');
}
// 用戶端發送預先檢查請求，響應會用戶端，
}else if(req.method == 'OPTIONS'){
res.setHeader('Access-Control-Allow-Methods', 'DELETE');//設定所允許的真是請求（delete，put等）
res.end('');
// 用戶端發送真實請求，響應資料
}else if(req.method == 'DELETE'){
res.end('Bye');
}
}); 效果：
很多人也認為使用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 請求方法。
轉載于:https://www.cnblogs.com/ruoruchujian/p/10999143.html