跨域之jsonp

来源：互联网发布：软件使用费增值税税率编辑：程序博客网时间：2024/06/05 04:02

什么是跨域

讲跨域之前，先理解什么是web同源策略

同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。

只要以下三点中的任何一点不满足，就形成了不同的域：

协议
域名
端口

这里写图片描述

跨域是应对web同源策略从而获取不同域中资源的手段。

跨域分类

一、跨全域

jsonp
CORS
Server Proxy:

二、跨页面

document.domain
postMessage
window.name
location.hash

jsonp方式

这几乎是最耳熟能祥的跨域方式了，但是由于在jquery类库中以$.ajax封装，dataType为jsonp，而且总是被人与ajax相提及，所以总是让人误以为jsonp做了一系列的跨域处理之后，能够让ajax跨域了，然而恰恰相反，导致需要跨域的原因是因为ajax的XMLHttpRequest受到同源策略的约束，我们才需要跨域。

如果XMLHttpRequest能够跨域访问资源，则会导致安全问题。因为XMLHttpRequest是一个纯粹的javascript对象，如果某网站存在漏洞导致XSS注入了JavaScript脚本，这个脚本就可以通过Ajax获取用户的信息并通过Ajax提交到其他站点。

我们使用jsonp跨域主要是利用了script标签不受同源策略限制的特性，在实现jsonp的过程中和ajax没有半毛钱关系，感觉颇有点hack的味道。

首先前端先设置好回调函数，并将其作为 url 的参数。
服务端接收到请求后，通过该参数获得回调函数名，并将数据放在参数中将其返回
收到结果后因为是 script 标签，所以浏览器会当做是脚本进行运行，从而达到跨域获取数据的目的。

下面用最简单的例子来实践jsonp跨域：

我们用http-server模块启动了一个超简服务：

// server.jsconst url = require('url');const http = require('http')http.createServer((req, res) => {    const data = {    message: '跨域成功'};    const callback = url.parse(req.url, true).query.callback;    res.writeHead(200);    res.end(`${callback}(${JSON.stringify(data)})`);}).listen(3000);console.log('服务已经启动');

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>index.html</title></head><body>    <script>    function jsonpCallback(data) {        alert('获得跨域数据:' + data.message);    }    </script>    <script src="http://127.0.0.1:3000?callback=jsonpCallback"></script></body></html>

(1). 全局安装http-server模块：npm install -g http-server

(2) 新建文件夹，进去新建一个server.js，copy以下服务端代码，在terminal进入相应文件路径，输入命令node server.js，服务启动成功

(3) 然后新建index.html，在所在文件夹目录下输入命令http-server

(4) 然后复制以上log中的ip和端口号到浏览器中访问相应html页面，获取结果

当我们访问127.0.0.1.1:8081 中的html页面时候，页面的script标签请求了另外一个域中的资源，并且我们在目标服务器中作了相应处理（使用url参数callback值作为函数名包裹json格式数据，然后返回这个字符串），请求完毕后由于script标签的特性浏览器会当做是脚本进行运行，从而获取函数中的数据，达到跨域目的。

优点：

兼容性很好，在古老的浏览器也能很好的运行
脱离ajax，不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。

缺点：

支持 GET 请求而不支持 POST 等其它类行的 HTTP 请求。
它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题

阅读全文

0 0