JS JSOP跨域请求实例详解
什么是跨域请求?
跨域请求是指在一个来源(即域名、端口、协议都相同)的网页中,不能发起对另一个来源的网页的请求。这是由浏览器的同源策略所限制的。
当在一个网页中通过 AJAX、Fetch、WebSocket 等方式向另一个域名(或主机名、端口号、协议)发起请求时,由于安全原因,浏览器会拦截这些请求,而这种被拒绝的请求就称为“跨域请求”。
为什么需要跨域请求?
在 Web 开发中,跨域请求是常见的需求。
例如,站点 A 的前端需要向站点 B 的服务端发起请求获取数据,但由于两个域名不同,因此不能直接发起请求,需要通过跨域方式来实现。此时,就需要使用跨域请求技术。
JSONP 是什么?
JSONP(JSON with Padding)是一种跨域请求方式,通过动态创建 <script>
标签,将返回的数据作为 JS 脚本执行,从而实现跨域请求。
JSONP 的核心原理在于:当前页面动态创建一个 <script>
标签,请求跨域服务器的数据,而接受到返回数据时,则是调用当前页面中预先定义好的函数,将返回数据作为参数传入,进而处理数据。
JSONP 的优点:
- 不受同源策略的限制,实现跨域请求
- 兼容性好,在老版本的浏览器、移动端等场景下都有良好的支持
- 界面友好,用户体验佳
JSONP 的缺点:
- 安全性问题,存在 XSS 攻击的风险
- 只支持 GET 方式的请求
JSONP 的实现步骤
- 在 HTML 页面中创建一个
<script>
标签,指定请求的地址及需要回调的函数。
```html
```
getData
是服务端提供的接口 URL,callback
是指定需要回调的函数名,handleData
是在自己的 JS 中定义的函数名。
-
服务端需要读取 URL 中的
callback
参数,并将数据通过此函数返回。javascript
function getData(req, res) {
const responseData = { username: 'Alice', age: 18 };
const callbackName = req.query.callback; // 获取回调函数名
res.send(`${callbackName}(${JSON.stringify(responseData)})`);
}此处以 Node.js 为例,使用
res.send
方法返回数据。 -
客户端实现回调函数。
javascript
function handleData(data) {
console.log(data.username); // 输出 "Alice"
console.log(data.age); // 输出 18
}
示例一:使用 JSONP 跨域请求百度搜索结果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP 示例</title>
</head>
<body>
<script>
function handleData(data) {
const result = document.querySelector('#result');
const links = data.g.map(d => `<li><a href="${d.u}">${d.k}</a></li>`).join('');
result.innerHTML = `<ul>${links}</ul>`;
}
</script>
<div>
<input id="keyword" type="text" placeholder="请输入关键词">
<button onclick="search()">搜索</button>
</div>
<div id="result"></div>
<script>
function search() {
const keyword = document.querySelector('#keyword').value;
const url = `https://www.baidu.com/su?wd=${keyword}&cb=handleData`;
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
</script>
</body>
</html>
示例二:使用 JSONP 跨域请求阿凡达数据接口
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP 示例</title>
</head>
<body>
<div>
<input id="keyword" type="text" placeholder="请输入角色名称">
<button onclick="search()">搜索</button>
</div>
<div id="result"></div>
<script>
function handleData(data) {
const result = document.querySelector('#result');
const links = data.data.map(d => `<li>${d.name} / ${d.affiliation}</li>`).join('');
result.innerHTML = `<ul>${links}</ul>`;
}
</script>
<script>
function search() {
const keyword = document.querySelector('#keyword').value;
const url = `https://jsonp.afeld.me/?url=https://www.avatarapi.com/api/v1/characters/search&name=${keyword}&access_token=demo`;
const script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
</script>
</body>
</html>
以上两个示例演示了使用 JSONP 跨域请求的实现方法。需要注意的是,JSONP 虽然能够实现跨域请求,但也存在一定的安全风险。在前端使用 JSONP 时,应注意数据的合法性和安全性,避免被攻击者利用漏洞进行 XSS 攻击。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS JSOP跨域请求实例详解 - Python技术站