jsonp是解决跨域的方法之一
其本质是 script标签发送请求,
原理: jsonp的实现是通过动态添加script标签从而发送http请求实现
- 准备一个静态页面
在3000端口提供http server并托管静态资源
如果没有下载插件就没有提示 插件名字: live server
效果如下
如果访问一个路由呢?
需要在服务端返回相应的数据,在浏览端获取并操作
将json数据包装起来并返回的一种方式 ----- 协议
在使用jsonp实现跨域的时候,它是需要将json数据作为函数的参数(packing的过程),最终在服务端将包装好的字符串作为结果返回给浏览器端。
具体代码如下
静态页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="./public/jquery-1.11.3.min.js"></script> -->
</head>
<body>
<h2>jsonp的跨域问题</h2>
<button id="btn"> 获取jsonp</button>
<script>
var btn = document.querySelector('#btn')
btn.onclick = function() {
//发送请求 并发送一个f字符串
addScript('http://localhost:3000/jsonp?callback=f')
}
//定义一个函数
function f(res) {
console.log(res)
}
// 动态添加srcipt标签 ,利用srcipt的src属性来发送请求
function addScript(src) {
//创建标签
var script = document.createElement('script')
//设置属性
script.src = src
// 添加到dom中
document.body.appendChild(script)
}
</script>
</body>
</html>
const express = require('express')
const path = require('path')
const { callbackify } = require('util')
const app = express()
app.use(express.static(path.join(__dirname, 'public')))
// 处理。jsonp的路由请求
app.get('/jsonp', (req, res) => {
// res.send('alert("也是可以访问的") ')
//获取回调函数的名称
let cb = req.query.callback
res.send(cb + "('这里将是一个实参,返回给函数')")
})
app.listen(3000, () => {
console.log('3000 ,ok')
})
配置跨域之rows 只需两步
由于是前后端分离开发,我们要使用ajax去给服务器要数据,先把跨域配置一下,如下:
在app.js使用之,如下:第一部 下载cors
在app.js进行配置 即可