关于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添加跨域

关于cros解决跨域的一个小例子（判断IP地址选择加不加跨域）

猜你喜欢