当前位置：首页 > news >正文

第十五章认识Ajax（六）

news 2025/10/27 6:41:05

Ajax同源策略

什么是Ajax同源策略？

Ajax同源策略是一种安全机制，用于限制通过Ajax技术发送的跨域请求。

同源策略要求Ajax请求只能发送到与当前页面具有相同协议、主机和端口的资源。（同源指的是协议、域名和端口都相同。）

具体的来说，Ajax同源策略可以让同一网站之间的访问不受限制，但不同网站之间不能随意访问。当然，Ajax同源策略规定URL地址中的协议、域名和端口都要相同，以保证多个页面或者请求来自同一个服务器，也就是同源，反之亦然。

举个例子，一个A网站和一个B网站有两个不同源的服务器，Ajax同源策略的限制让A网站中的HTML文件只能向A网站的服务器发送Ajax请求；B网站中的HTML文件只能向B网站的服务器发送Ajax请求

同源策略的目的是防止恶意网站利用跨域请求窃取用户的敏感信息。如果同源策略不被浏览器遵循，恶意网站就可以通过跨域请求向其他网站发送请求，获取敏感信息或者执行恶意操作。

同源策略要求Ajax请求只能访问与其所在页面具有相同源的资源，即只能与同源的服务器进行交互。这样可以防止潜在的安全漏洞，例如跨站点脚本攻击（XSS）和跨站点请求伪造（CSRF）。

同源策略有一些例外情况，例如通过CORS（跨域资源共享）协议进行跨域请求，或者使用JSONP（JSON with Padding）技术来获取跨域数据。这些方法可以通过在服务器端设置相关的响应头信息来实现跨域请求。

总而言之，Ajax同源策略是一种保护用户信息安全的机制，限制了跨域请求的发送，防止恶意网站进行攻击。

JSONP解决跨域请求问题

什么是JSONP解决跨域请求问题

JSONP（JSON with Padding）是一种跨域数据传输技术，用来解决跨域请求问题的方法。

浏览器因为同源策略的限制，不允许跨域请求，即从一个域名的页面向另一个域名的服务端发送请求。而JSONP通过嵌入一个<script>标签来发送请求，绕过了同源策略的限制。示例代码如下：

<script> type="text/javascript" src="JSONP请求地址"></script>
//当页面会加载时会发起一个JSONP的跨域请求

演示JSONP请求地址的组成，示例代码如下：

http://localhost:3000/jsonp?jsoncallback=callbackFunction&name=value

/jsonp表示路由的地址，？符号表示连接请求参数，多个参数使用& 符号来连接，jsoncallback表示请求参数名称，这里的值设置为callbackFunction回调函数，name参数的值设置为value。

JSONP的工作原理

服务端返回一个调用指定回调函数的JavaScript代码，该回调函数将被传递服务端返回的数据作为参数。客户端需要提供一个全局的回调函数，并将其名称作为请求参数发送给服务端。服务端在生成响应时，会将这个回调函数的名称作为参数，将数据作为回调函数的参数传递给客户端。客户端接收到响应后，就可以自动执行回调函数，从而获取到数据。

具体的步骤如下：

客户端定义一个全局的回调函数，例如handleResponse。
客户端创建一个<script>标签，并设置其src属性为服务端接口地址。在地址的末尾添加?callback=handleResponse，将回调函数的名称作为请求参数发送给服务端。
服务端接收到请求后，获取到请求参数中的回调函数名称，并根据数据生成一段JavaScript代码，调用这个回调函数，并将数据作为参数传递给它。
服务端将生成的JavaScript代码作为响应返回给客户端。
客户端接收到响应后，即可自动执行回调函数，获取到数据。

需要注意的是，服务端需要对回调函数的名称进行校验，防止恶意代码执行。

JSONP的优点是简单易用，兼容性好，可以在低版本的浏览器中使用。缺点是只支持GET请求，不支持POST等其他类型的请求，同时也存在安全风险。