關於cros解決跨域的一個小例子（判斷IP地址選擇加不加跨域）
阿新 • • 發佈：2019-05-13
pan file cti com span onclick tro ini div
需求：通過8000、9000端口訪問7000端口的1.html頁面，並獲取button按鈕點擊後觸發的彈窗值
首先需要準備三個服務器，這裏分別命名為http7000.js、http8000.js、http9000.js，其次要準備一個html頁面書寫ajax，命名為1.html
第一步先創建服務器，這裏僅以get方式傳值舉例，7000中的代碼為：
//引入http模塊 var http = require(‘http‘); //創建服務器 var server = http.createServer(); //引入url模塊 var url = require(‘url‘); //引入系統模塊 var fs = require(‘fs‘);//設置監聽端口 server.listen(7000, function () { console.log(‘服務器端口為7000‘); }) //為服務器綁定訪問事件 server.on(‘request‘, function (req, res) { //獲取url var urls = url.parse(req.url); //判斷跨域的IP地址是否許可 if (req.headers.origin == ‘http://127.0.0.1:8000‘) { //若許可則綁定響應頭 res.setHeader(‘Access-Control-Allow-Origin‘, ‘*‘); }//判斷傳值方式 if (req.method == ‘GET‘) { if (urls.pathname == ‘/‘) { res.end(‘gggeettt‘) } else { fs.readFile(‘.‘ + urls.pathname, function (err, data_str) { if (!err) { res.end(data_str); } else { res.end(‘‘); } }) } } else { res.end(‘ncc‘) } })
8000、9000中的代碼類似，只是沒有判斷跨域的IP地址，沒有設置響應頭，這裏就不再列舉
接下來書寫html頁面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <input type="button" id="btn" value="發送"> </body> <script> //ajax document.getElementById(‘btn‘).onclick = function () { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ alert(xhr.responseText); } } xhr.open(‘get‘,‘http://127.0.0.1:7000‘)//設置要訪問的地址 xhr.send();} </script> </html>
同時開啟3個服務器，並在瀏覽器輸入 127.0.0.1:8000、127.0.0.1:9000 分別訪問
效果如下
8000：
9000：
可見：1.實現了跨域
2.實現了判斷IP添加跨域
關於cros解決跨域的一個小例子（判斷IP地址選擇加不加跨域）