实现跨域登录功能客户端代码当发送跨域请求时，携带cookie信息 xhr.withCredentials = true

客户端代码

当发送跨域请求时，携带cookie信息 xhr.withCredentials = true;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现跨域功能</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
            padding-top: 60px;
        }
    </style>
</head>
<body>
    <div class="container">
        <form id="loginForm">
            <div class="form-group">
                <label>用户名</label>
                <input type="text" name="username" class="form-control" placeholder="请输入用户名">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" name="password" class="form-control" placeholder="请输入用密码">
            </div>
            <input type="button" class="btn btn-default" value="登录" id="loginBtn">
            <input type="button" class="btn btn-default" value="检测用户登录状态" id="checkLogin">
        </form>
    </div>
    <script type="text/javascript">
        // 获取登录按钮
        var loginBtn = document.getElementById('loginBtn');
        // 获取检测登录状态按钮
        var checkLogin = document.getElementById('checkLogin');
        // 获取登录表单
        var loginForm = document.getElementById('loginForm');
        // 为登录按钮添加点击事件
        loginBtn.onclick = function () {
            // 将html表单转换为formData表单对象
            var formData = new FormData(loginForm);
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('post', 'http://localhost:3001/login');
            // 当发送跨域请求时，携带cookie信息
            xhr.withCredentials = true;
            // 发送请求并传递请求参数
            xhr.send(formData);
            // 监听服务器端给予的响应内容
            xhr.onload = function () {
                console.log(xhr.responseText);
            }
        }

        // 当检测用户状态按钮被点击时
        checkLogin.onclick = function () {
            // 创建ajax对象
            var xhr = new XMLHttpRequest();
            // 对ajax对象进行配置
            xhr.open('get', 'http://localhost:3001/checkLogin');
            // 当发送跨域请求时，携带cookie信息
            xhr.withCredentials = true;
            // 发送请求并传递请求参数
            xhr.send();
            // 监听服务器端给予的响应内容
            xhr.onload = function () {
                console.log(xhr.responseText);
            }
        }
    </script>
</body>
</html>

服务器端代码

允许客户端发送跨域请求时携带cookie信息 res.header('Access-Control-Allow-Credentials', true);

// 拦截所有请求
app.use((req, res, next) => {
    // 1.允许哪些客户端访问我
    // * 代表允许所有的客户端访问我
    // 注意：如果跨域请求中涉及到cookie信息传递，值不可以为*号 比如是具体的域名信息
    res.header('Access-Control-Allow-Origin', 'http://localhost:3000')
    // 2.允许客户端使用哪些请求方法访问我
    res.header('Access-Control-Allow-Methods', 'get,post')
    // 允许客户端发送跨域请求时携带cookie信息
    res.header('Access-Control-Allow-Credentials', true);
    next();
});

app.post('/login', (req, res) => {
    // 创建表单解析对象
    var form = formidable.IncomingForm();
    // 解析表单
    form.parse(req, (err, fields, file) => {
        // 接收客户端传递过来的用户名和密码
        const { username, password } = fields;
        // 用户名密码比对
        if (username == 'yyqxyyqx' && password == '123456') {
            // 设置session
            req.session.isLogin = true;
            res.send({message: '登录成功'});
        } else {
            res.send({message: '登录失败, 用户名或密码错误'});
        }
    })
});

app.get('/checkLogin', (req, res) => {
    // 判断用户是否处于登录状态
    if (req.session.isLogin) {
        res.send({message: '处于登录状态'})
    } else {
        res.send({message: '处于未登录状态'})
    }
});