Ajax 跨域请求

发布时间：2023-04-06 08:50:14 所属栏目：教程来源：

导读：简单来说，跨域请求就是一个域下的资源请求另外一个域下的资源。

同一个域，指的是，协议名、域名、端口号都一致。举个例子来说，假如 “http://www.a.com” 下的 JavaScript 脚本发起 Ajax 请求 &ldq

简单来说，跨域请求就是一个域下的资源请求另外一个域下的资源。

同一个域，指的是，协议名、域名、端口号都一致。举个例子来说，假如 “http://www.a.com” 下的 JavaScript 脚本发起 Ajax 请求 “http://www.a.com/ajax” ，由于协议名 http 、域名 www.a.com 和端口号（默认都是 80）三者都是一致的，因此都属于同一个域，不造成跨域请求。而假如其中任一元素不相同，则造成跨域请求。与此同时，浏览器出于安全考虑，基于同源策略则会做一定的限制：比方说：

无法获取不同域的 Cookie、LocalStorage 等等。
无法获取不同域的 DOM 对象。
无法向不同域发送 Ajax 请求。

开始讲解 Ajax 造成的跨域问题如何解决之前，我们思考一下：

假如我们要从山的一边 A 到山的另一边 B，这座山无疑就是个障碍，那么我们有几种解决办法？

我想，要么我们就直接穿过去，要么我们就“曲线救国”，绕个道也未尝不可。没错，接下来我们要讲的 Ajax 跨域也是从这两方面来讲，既然跨域有这样那样的一些限制，那我们要么就直面去解决，要么就耍个机灵，同样能够解决。

JSONP 是一个非常经典的解决跨域的方法。我们知道，在 HTML 中，一些资源的引用事实上是不会受到跨域限制的，比如 script 标签。浏览器在解析 HTML 的时候，解析到了 script 标签，会把相应的资源下载下来。我们可以利用这一点，来实现前后端信息的交互。

JSONP 原理
定义好回调函数，比方说命名为 callback ，并将函数名作为 url 的参数；
添加 script 标签，指定的资源为目标域的方法，也就是上面的 url ；
后端接收 GET 请求，返回 callback(responseData) 格式数据，把要返回的数据 responseData 传到 callback() 中；
前端接收 javaScript 内容，执行了后端返回的 callback(responseData) ，这样就完成了一次前后端交互了。

具体例子
假如 HTML 有一个容器为 container，我们要通过 JSONP 的方式来为 container 插入一条内容，那么，我们可以这么做：

HTML 关键代码
<div id="container">
</div>

javaScript 关键代码
// jsonp
// 定义一个添加内容的回调函数
window.addContent = function (content) {
document.getElementById('container').innerHTML = content;
}
/**
* 发送 JSONP 请求的函数
* cb 为回调函数的函数名
*/
function sendJsonPRequest (cb) {
// 创建 script 标签
const body = document.getElementsByTagName('body')[];
const script = document.createElement('script');
script.type = 'text/javascript';

// 指定标签的 url ，callback 参数为回调函数的函数名
script.src = `http://localhost:8082/jsonp/get?callback=${cb}`;
body.appendChild(script); // 添加到 body 最后面
}
sendJsonPRequest('addContent') // 执行发送 JSONP 请求
显而易见，前端我们会创建一个 script 标签，并且附带定义好的回调函数的函数名传给服务端。与此同时，我们需要在服务端进行 JSONP 请求的响应。

服务端关键代码
router.get("/jsonp/get", function(req, res) {
const cb = req.query.callback; // 读取请求附带的参数 callback
const resData = '这是一条服务端返回的内容';
res.send(`${cb}(${JSON.stringify(resData)})`); // 返回 callback(resData) 格式的数据
});
效果

从右边控制台可以看出来，我们成功创建了 JSONP 的请求，并且结果正如我们预期的执行了 addContent('这是一条服务端返回的内容')，界面上展示出插入的内容。

小结
使用 JSONP 的方式，我们可以通过 script 标签绕过浏览器的跨域限制，进行前后端数据交互。不过另一方面，这种方法也很有局限性，我们只能够发送 GET 请求，无法满足更加复杂业务的需求。一般我们也不会推荐直接使用 JSONP 的方式来解决跨域问题。

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!