javasript -跨域

一、JSONP
- 1.1 什么是jsonp
- 1.2 实例
二、JSONP的问题

其他连接：

一、JSONP

1.1 什么是jsonp

JSONP，JSON with Padding，填充式 JSON 或参数式 JSON。

JSONP实现跨域的原理：

动态创建<script>标签，然后利用<script>的src 不受同源策略约束来跨域获取数据。

1.2 实例

demo下载

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>跨域 - JSONP</title>
</head>
<body>
<div id="text">
    正在获取数据。。。
</div>

<script>
    function jsonp (data) {
      console.log(data)
      document.getElementById('text').innerHTML = data
    }
</script>
<script src="http://localhost:3000/data.js"></script>
</body>
</html>

data.js 其实什么也没有

app.js

const http = require('http')

const server = http.createServer()

server.on('request', (req, res) => {
  if (req.url === '/data.js') {
    res.writeHead(200, {
      'Content-Type': 'application/x-javascript'
    })
    res.end(`jsonp("jsonp 可以了")`)
  }
})

server.listen(3000)

必须设置Content-Type 为 application/x-javascript，不然浏览器无法识别

返回的内容必须是jsonp(xxx)的格式，xxx 就是要返回的数据

结果：

二、JSONP的问题

JSONP存在安全隐患。

JSONP是从其他域中加载代码执行，如果其他域不安全，很可能会在响应中夹带一些恶意代码，而此时除了完全放弃 JSONP 调用之外，没有办法追究。因此在使用不是你自己运维的 Web 服务时，一定得保证它安全可靠。

难确定 JSONP 请求是否失败。

虽然 HTML5 给<script>元素新增了一个 onerror事件处理程序，但目前还没有得到任何浏览器支持。

为此，开发人员不得不使用计时器检测指定时间内是否接收到了响应。

JSONP只支持于GET请求

Enjoy life!

javasript -跨域 - JSONP

一、JSONP

1.1 什么是jsonp

1.2 实例

二、JSONP的问题

Enjoy life!

目录

一、JSONP

1.1 什么是jsonp

1.2 实例

二、JSONP的问题