封装JSONP方法&跨域请求

最新推荐文章于 2024-06-05 09:02:44 发布

prospect_

最新推荐文章于 2024-06-05 09:02:44 发布

阅读量275

点赞数 1

CC 4.0 BY-SA版权

文章标签： ajax node.js

本文链接：https://blog.csdn.net/weixin_43713835/article/details/102998082

本文介绍了如何通过封装JSONP方法来实现跨域请求，包括后台代码的参考示例，用于解决AJAX进行跨域登录功能时遇到的问题。同时，提供了跨域请求后台的相关参考资料。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <button id="btn1">点我发送请求</button>
    <button id="btn2">点我发送请求</button>
    <script type="text/javascript">
        // 获取按钮
        var btn1 = document.getElementById('btn1');
        var btn2 = document.getElementById('btn2');
        // 为按钮添加点击事件
        btn1.onclick = function() {
            jsonp({
                // 请求地址
                url: 'http://localhost:3001/better',
                data: {
                    name: 'lisi',
                    age: 30
                },
                success: function(data) {
                    console.log(123)
                    console.log(data)
                }
            })
        }
        btn2.onclick = function() {
            jsonp({
                // 请求地址
                url: 'http://localhost:3001/better',
                success: function(data) {
                    console.log(456789)
                    console.log(data)
                }
            })
        }

        function jsonp(options) {
            // 动态创建script标签
            var script = document.createElement('script');
            // 拼接字符串的变量get请求方式
            var params = '';
            for (var attr in options.data) {
                params += '&' + attr + '=' + options.data[attr];
            }
            // 这里的目的是让每次调用的函数名不同
            var fnName = 'myJsonp' + Math.random().toString().replace('.', '');
            // 它已经不是一个全局函数了
            // 我们要想办法将它变成全局函数
            window[fnName] = options.success;
            // 为script标签添加src属性
            script.src = options.url + '?callback=' + fnName + params;
            // 将script标签追加到页面中
            document.body.appendChild(script);
            // 为script标签添加onload事件
            script.onload = function() {
                document.body.removeChild(script);
            }
        }
    </script>

后台代码(参考)

app.get('/better', (req, res) => {
    // 接收客户端传递过来的函数的名称
    const fnName = req.query.callback;
    // 将函数名称对应的函数调用代码返回给客户端
    const data = JSON.stringify({ name: "张三" });
    const result = `${fnName}(${data})`;
    console.log(result);
    setTimeout(() => {
            res.send(result);
        }, 1000)
    // res.jsonp({name: 'lisi', age: 20});这里是express框架给我写好的和上面步骤相同直接调用即可
});

跨域请求登录功能

<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>

跨域请求后台（参考）

// 拦截所有请求
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 == 'sy5415' && 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: '处于未登录状态' })
    }
});