AJAX学习---跨域

前进的北极熊

已于 2023-04-24 00:14:49 修改

阅读量227

点赞数

分类专栏： AJAX 文章标签： ajax 学习 javascript

于 2022-10-18 10:31:28 首次发布

本文链接：https://blog.csdn.net/m0_57809042/article/details/127383265

版权

AJAX 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

1 同源策略

同源策略(Same-Origin Policy)最早由Netscape公司提出，是浏览器的一种安全策略。

同源:协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

2 如何解决跨域

2.1 JSONP

2.1.1 JSONP 是什么

JSONP(JSON with Padding)，是一个非官方的跨域解决方案，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

2.1.2 JSONP 怎么工作的？

在网页有一些标签天生具有跨域能力，比如：img link iframe script。

JSONP就是利用script标签的跨域能力来发送请求的。

2.1.3 JSONP的使用

动态的创建一个script 标签

var script = document.createElement("script");

设置script的src，设置回调函数

script.src = "http://localhost:3000/testAJAX?callback=abc";
function abc(data) {
	alert(data.name);
};

将script 添加到body 中

document.body.appendChild(script);

服务器中路由的处理

router.get("/testAJAX" , function (req , res) {
	console.log("收到请求");
	var callback = req.query.callback;
	var obj = {
		name:"孙悟空",
		age:18
	}
	res.send(callback+"("+JSON.stringify(obj)+")");
});

2.1.4 jQuery中的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>Document</title>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
    <script src="../../jquery.min.js"></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function() {
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data) {
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
        });
    });
    </script>
</body>
</html>

3 原生jsonp实践

2-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>案例</title>
</head>
<body>
    用户名： <input type="text" id="username">
    <p></p>
    <script>
        // 获取input元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        // 声明handle函数
        function handle(data) {
            input.style.border = "solid 1px #f00";
            // 修改p标签的提示文本
            p.innerHTML = data.msg;
        }

        // 绑定事件
        input.onblur = function() {
            // 获取用户的输入值
            let username = this.value;
            // 向服务器端发送请求 检测用户名是否存在
            // 1. 创建script标签
            const script = document.createElement('script');
            // 2. 设置标签的src属性
            script.src = 'http://127.0.0.1:8000/check-username';
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

server.js

// 用户名检测是否存在
app.all('/check-username', (request, response) => {
    // response.send('hello json-server');
    const data = {
        exist: 1,
        msg: '用户名已经存在'
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 返回结果
    response.end(`handle(${str})`);
});

4 jQuery发送jsonp请求

需求：点击按钮，向8000端口发出请求，返回的结果在div中呈现

3-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>
    <style>
        #result {
            width: 300px;
            height: 100px;
            border: solid 1px #089;
        }
    </style>
    <script src="../../jquery.min.js"></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result"></div>
    <script>
        $('button').eq(0).click(function() {
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data) {
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
        });
    });
    </script>
</body>
</html>

server.js

app.all('/jquery-jsonp-server', (request, response) => {
    // response.send('hello json-server');
    const data = {
        name: 'yayahh',
        city: ['背景', '上海', '深圳']
    };
    // 将数据转换为字符串
    let str = JSON.stringify(data);
    // 接收callback参数
    let cb = request.query.callback;
    // 返回结果
    response.end(`${cb}(${str})`);
});

5 设置CORS响应头实现跨域

5.1 CORS 是什么？

CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS 是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get 和post 请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源

5.2 CORS 怎么工作的？

CORS 是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

5.3 CORS的使用

主要是服务器端的设置：

app.all('/cors-server', (request, response) => {
    // 设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', "*");
    response.setHeader('Access-Control-Allow-Headers', "*");
    response.setHeader("Access-Control-Allow-Method", "*");
    response.send('hello CORS');
})