本文详解 Node.js 中 JSONP 接口的实现原理，指出其仅支持 GET 请求且非标准 Ajax。重点说明在已配置 CORS 的项目中，JSONP 接口必须优先声明以避免冲突。通过 Node.js 原生 http 模块及 jQuery 示例，展示从服务端拼接回调字符串到客户端动态加载 script 标签的完整跨域调用流程。
1. 概念及特点
原理：利用 <script> 标签 src 属性请求服务器数据，服务器返回函数调用，此方式称为 JSONP
特性：① JSONP 非真正的 Ajax 请求，未使用 XMLHttpRequest 对象
② JSONP 仅支持 GET 请求，不支持 POST、PUT、DELETE 等
2. 创建 JSONP 接口的注意事项
若已配置 CORS 跨域资源共享，为防止冲突，必须在配置 CORS 中间件前声明 JSONP 接口，否则 JSONP 接口会被处理成开启了 CORS 的接口
// 优先创建 JSONP 接口 [这个接口不会被处理成 CORS 接口]
app.get('/api/jsonp', (req, res) => { })
// 配置 CORS 中间件 [后续的所有接口都会被处理成 CORS 接口]
app.use(cors())
// 这是一个开启了 CORS 的接口
app.get('/api/get', (req, res) => { })
3. 实现 JSONP 接口的步骤
① 获取客户端发送过来的回调函数的名字
② 得到要通过 JSONP 形式发送给客户端的数据
③ 根据前两步得到的数据，拼接出一个函数调用的字符串
④ 把上一步拼接得到的字符串，响应给客户端的 <script> 标签进行解析执行
4. 实现 JSONP 接口的具体代码
app.get('/api/jsonp', (req, res) => {
// 1.
const funName = req.query.callback
// 2.
const data = { name: 'zj', age: '22' }
// 3.
const scriptStr = `${funName}(${JSON.stringify(data)})`
// 4.
res.send(scriptStr)
})5. 在网页中使用 JQuery 发起 JSONP 请求
调用 $.ajax()函数，提供 JSONP 的配置选项，从而发起 JSONP 请求
$('#btnJSONP').on('click', () => {
$.ajax({
method: 'GET',
url: 'http://127.0.0.1/api/jsonp',
dataType: 'jsonp', // 表示要发起的是 JSONP 请求
success: (res) => {
console.log(res)
}
})
})使用JSONP格式实现跨域
实现步骤
- 动态创建一个script标签
- src指向接口的地址
- 定义一个函数和后端调用的函数名一样
实现代码 -- 在nodejs中使用http内置模块起一个服务，端口号为3000
const url = require('url')
const http = require('http')
const server = http.createServer((req,res)=>{
if(req.url === '/favicon.ico') return //图标忽略 --- 图标地址也会请求后台服务
const {query,pathname} = url.parse(req.url,true) //若加上true这个参数，query字符串参数会自动转成对象格式
//设置头部信息 状态为200 内容为JSON格式 如果要返回html片段这设置为text/html
res.writeHead(200, { 'Content-Type': 'application/json' });
if(pathname == '/api/data'){
//定义对象，返回给前端的 数据
const obj = {code:200,message:'jsonp形式返回给前端'}
//返回一个JSON调用的函数
res.end(`toFront(${JSON.stringify(obj)})`)
}else{
//简单处理了
res.writeHead(404, { 'Content-Type': 'application/json' });
res.end('404')
}
//jsonp跨域操作
// console.log(req.url) //获取请求除域名外的地址 例如 localhost:300/api 只获取/api
})
server.listen(3000,()=>{
console.log("服务已启动")
})在客户端的代码
<script type="text/javascript">
//jsonp跨域步骤
//1.动态创建一个script标签
const newscript = document.createElement('script')
//2.src指向接口的地址
newscript.src = 'http://localhost:3000/api/data'
document.body.appendChild(newscript )
//3.定义一个函数和后端调用的函数名一样
function toFront(res){
//后台返回的数据 这个函数是后台服务调用过来的
console.log(res)
}
</script>执行的结果 ,返回一个JSON格式的文档
到此这篇关于Node.js使用JSONP接口的具体用法的文章就介绍到这了,更多相关Node.js JSONP接口内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！