node.js跨域的解决方案之jsonp(学会了放屁会变香★.★)

最新推荐文章于 2022-11-15 15:19:47 发布

zhangyizuishuai

最新推荐文章于 2022-11-15 15:19:47 发布

阅读量174

点赞数

分类专栏： node.js

本文链接：https://blog.csdn.net/zhangyizuishuai/article/details/108415901

版权

node.js 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

跨域问题

// 跨域代理方式
// 跨域产生的原因是因为浏览器有同源策略
// 解决方案有
// jsonp（原理:script标签的src不受同源策略的影响）
// cors(设置请求头)
// 服务器代理
// 长连接

下面我们就来仔细讲解跨域解决方案按之中的jsonp

Jsonp跨域接口以及请求

jsonp请求的小常识

jsonp请求返回的一定要是js文件
jsonp请求的接口只能是get的接口不可以是其他的接口类型（其它接口类型有很多比如post put patch delete接口）

如下为html请求的写法

<body>
    <button id="s">发送jsonp跨域请求</button>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script>
     s.onclick=function(){
        var script = document.createElement("script")
        // 注意要把回调函数的字段传入到访问地址栏里去
        script.src ="http://localhost:3333/jsonp?callback=laoxie"
        // 创建完scrpt标签,要把script标签放入到body里面才会发请求,如果不放就不会发请求
        var body = document.querySelector("body")
        body.appendChild(script)
    }
        // 回调函数一定要是全局的不然就会报错
    function laoxie(res){
        console.log(res);
    }
</script>

Jsonp接口

// jsonp请求的小常识
// jsonp请求返回的一定要是js文件
// jsonp请求的接口只能是get的接口不可以是其他的接口（其它接口比如post put patch delete接口）
const express=require("express")
const app=express()
app.get("/jsonp",(req,res)=>{
    // 如果你传入的字段属性名是callback结构callback,如果是别的就结构别的,结构什么看你请求地址的回调属性名
    var {callback}=req.query
    var data={
        boy:"张亿",
        gril:"马嘉宁",
        love:"★"
    }
    // 返回一个全局的回调函数调用
    // 回调函数内部参数需要转成JSON字符串并且配合模板字符串
    // 把data对象当做一个变量传入回调函数的实参当中
    res.send(`${callback}(${JSON.stringify(data)})`)
})
app.listen(3333,()=>{
    console.log("服务器3333端口号已经成功开启！");
})

zhangyizuishuai

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js跨域的解决方案之jsonp(学会了放屁会变香★.★)

跨域问题// 跨域代理方式// 跨域产生的原因是因为浏览器有同源策略// 解决方案有// jsonp（原理:script标签的src不受同源策略的影响）// cors(设置请求头)// 服务器代理// 长连接下面我们就来仔细讲解跨域解决方案按之中的jsonpJsonp跨域接口以及请求jsonp请求的小常识jsonp请求返回的一定要是js文件jsonp请求的接口只能是get的接口不可以是其他的接口类型（其它接口类型有很多比如post put patch delete接口）如下为htm
复制链接

扫一扫