跨域
跨域有三個條件,滿足任何一個條件就是跨域
1:服務器端口不一致
2:協議不一致
3:域名不一致
解決方案:
1.jsonp
在前台通過動態添加script標簽及src屬性,表面看上去與ajax極為相似,但是,這和ajax並沒有任何關系;為了便於使用及交流,逐漸形成了一中非正式傳輸協議,人們把它稱作 jsonp 。
代碼如下:
html:
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 });
運行結果:
總結一下:
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 請求方法。