前言
大家有没想过这个问题💤？
一时想不起来的话就往下看吧，哈哈哈~
一般情况下面试官可能不会问你原理，只问你有哪几种实现跨域的方法，有那些优缺点，可能你就八股文一顿输出，巴拉巴拉，但假如问你了呢，会不会语塞呢，哈哈哈~
emmm... 不大清楚的话那我们简单了解下原理~ 查缺补漏💪
原理
简单点来说就是动态创建script标签并注入我们的get请求，从而绕开了浏览器的同源策略~
但最终允不允许资源请求访问还得看服务端有没开放访问权限~
跨域请求涉及的知识点还是蛮多的，这里我就不展开讲了，还是先看下怎么简单地去走通JSONP流程吧~
代码实现
服务端：
const express = require('express');
const app = express();
app.get('/cheng', (req, res) => {
const callback = req.query.callback;
const data = { message: "Hello, $程!" };
res.send(`${callback}(${JSON.stringify(data)})`);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
客户端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP</title>
</head>
<body>
<h1>JSONP</h1>
<div id="app"></div>
<script>
function handleData(data) {
document.getElementById('app').innerText = data.message;
}
function queryJSONP(url) {
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
const url = 'http://localhost:3000/cheng?callback=handleData';
queryJSONP(url);
</script>
</body>
</html>
效果
626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
