关于cros解决跨域的一个小例子(判断IP地址选择加不加跨域)
需求:通过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添加跨域