跨域请求的实现

WEB_CMC

已于 2024-01-07 22:10:16 修改

阅读量333

点赞数 1

分类专栏： web功能文章标签： js ajax jsonp

于 2021-07-13 12:43:46 首次发布

本文链接：https://blog.csdn.net/qq_34657921/article/details/118697519

版权

web功能专栏收录该内容

3 篇文章 0 订阅

订阅专栏

跨域请求的实现

1、原生跨域

使用script标签的scr属性发送请求
在服务器端设置指定类型的字符串，返回的字符串需要拼接为函数调用的形式，真正传输的数据作为函数调用的实参
在发送请求的script标签之前声明对应的函数，并设置对应的形参，用于接收服务器返回的数据

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <h1 οnclick="demo()">js执行函数</h1> -->
    <script>
    function demo(data) {
        console.log('this is demo');
        console.log(data);
    }
    </script>
    <script src="http://localhost:3001/getMsg?name=zhangsan&sex=nan"></script>
    <!-- <script src="js/xxoo.js"></script> -->
</body>
</html>

server.js:

if (file_path == '/getMsg' && req.method.toLowerCase() == 'get') {
	console.log('get请求触发了');
	
	res.end('demo(' + JSON.stringify({
		err: 0,
		data: {
			name: 'getMsg',
			port: 3001
		}
	}) + ')')
	return;
}

2、jquery中的jsonp

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>index.html</h1>
    <script src="js/jquery.js"></script>
    <script>
    // 发送ajax请求
    $.ajax({
        url: 'http://localhost:3001/getMsg',
        method: 'get',
        dataType: 'jsonp',
        success: function(data) {
            console.log(data);
        }
    })
    </script>
</body>
</html>

server.js

if (file_path == '/getMsg' && req.method.toLowerCase() == 'get') {
	console.log('get请求触发了');
	// 获取callback对应的值
	var callback = url_obj.query.callback;
	console.log(callback);
	res.end(callback + '(' + JSON.stringify({
		err: 0,
		data: {
			name: 'getMsg',
			port: 3001
		}
	}) + ')')
	return;
}

封装jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>封装jsonp</title>
</head>
<body>
    <script>
    function JSONP(url, data, callback) {
        // 拼接query字符串
        var str = '';
        // 遍历数据对象
        for (var i in data) {
            str += '&' + i + '=' + data[i];
        }
        // 去除对于的&
        str = str.slice(1);
        // 拼接请求路径
        url += '?' + str;
        // 创建script元素
        var script = document.createElement('script');
        // 设置src属性
        script.src = url;
        // 让script元素上树
        document.body.appendChild(script);
        // 创建jsonp回来之后执行的函数
        window[data.callback] = function(res) {
            callback(res);
            // 将script标签删除
            document.body.removeChild(script);
            // 删除掉设定的函数
            delete window[data.callback];
        };   
    }
    JSONP('http://localhost:3001/getJsonp', {name: '莉莉', sex: '男', callback: 'xxoo'}, function(data) {
        if (data.err) {
            // 失败的时候
            console.log(data.msg);
        } else {
            // 成功的时候
            console.log(data.msg);
        }
    });

    </script>
</body>
</html>

3、服务器端设置

/************************设置接口*************************/ 
if (file_path == '/getMsg' && req.method.toLowerCase() == 'get') {
	// 服务器端跨域的设置
	res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3002');
	res.setHeader('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
	res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
	res.setHeader('Access-Control-Allow-Credentials', 'true');

	res.end(JSON.stringify({
		err: 0,
		data: {
			name: 'getMsg',
			port: 3001
		}
	}))
	return;
}