jsonp模块——解决跨域请求

我们知道jsonp是一个允许跨域访问的东西。
jsonp的实现原理

动态创建script标签
（script标签中的地址是后端实现 jsonp的请求地址）
前端定义好函数
后端返回值是前端函数(后端数据做参数)

同样node中使用jsonp也遵守上卖弄的规则：后端返回值是前端函数(后端数据做参数)

node实现jsonp

jsonp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    jsonp接口调用
    <p></p>
    <script type='text/javascript'>
    var script1 = document.createElement("script")
    script1.src="http://localhost:3000/hello"
    document.body.appendChild(script1)

    function yang (data){
      
      
       var p = document.getElementsByTagName("p")[0]
       console.log(p)
       p.innerHTML=data.name
    }
    </script>
</body>
</html>

jsonp.js

var http = require("http")
var url = require("url")
http.createServer((req, res) => {
    
    
    var urlobj = url.parse(req.url)
    switch (urlobj.pathname) {
    
    
        case "/hello":
        //jsonp格式：函数调用
            res.end(`yang(${
      
      JSON.stringify({
      
      
                name: "yang",
                age:18
            })})`)
    }
}).listen(3000, () => {
    
    
    console.log("服务器启动成功")
})

先启动jsonp.js再打开页面
输出：
在这里插入图片描述

优化

前面的写法，后端会使用到前端定义的函数，纳闷一旦前端的函数名进行了修改后端就会访问不到，从而出错。所以我们后端一般动态的获取前端的函数名进行调用，动态调用的话如何获取函数名呢？就是通过请求路径后面连接参数进行传递，后端再使用query.参数名进行接收。

即：
jsonp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    jsonp接口调用
    <p></p>
    <script type='text/javascript'>
    var script1 = document.createElement("script")
    script1.src="http://localhost:3000/hello?callback=yang"
    document.body.appendChild(script1)

    function yang (data){
      
      
       var p = document.getElementsByTagName("p")[0]
       console.log(p)
       p.innerHTML=data.name
    }
    </script>
</body>
</html>

jsonp.js

var http = require("http")
var url = require("url")
http.createServer((req, res) => {
    
    
    var urlobj = url.parse(req.url, true)
    console.log(urlobj)
    switch (urlobj.pathname) {
    
    
        case "/hello":
            res.end(`${
      
      urlobj.query.callback}(${
      
      JSON.stringify({
      
      
                name: "yang",
                age:18
            })})`)
    }
}).listen(3000, () => {
    
    
    console.log("服务器启动成功")
})

cors——解决跨域请求

实现 jsonp 跨域请求是通过返回jsonp格式的函数调用，那如果我们想要node返回的是 json数据 而不是 jsonp的函数调用 ，那此时如何实现跨域请求呢？就需要使用到cors。

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

eg：
cors.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type='text/javascript'>
    // fetch发送ajax请求,请求后端数据（跨域了）
    fetch("http://localhost:3000/hello")
    .then(res=>res.json())//获取json数据
    .then(res=>{
      
      
        console.log(res)
    })

    </script>
</body>
</html>

cor.js

var http = require("http")
var url = require("url")
http.createServer((req, res) => {
    
    
    var urlobj = url.parse(req.url, true)
    
    res.writeHead(200, {
    
    
        "Content-Type": "application/json;charset=utf-8",
        // cors头,允许跨域
        "access-control-allow-origin":"*"
    })

    switch (urlobj.pathname) {
    
    
        case "/hello":
            res.end(`${
      
      JSON.stringify({
      
      
                name: "yang",
                age:18
            })}`)
    }
}).listen(3000, () => {
    
    
    console.log("服务器启动成功")
})

启动cor.js
运行页面
在这里插入图片描述
获取到数据。

node内置模块——Http模块：jsonp模块、cors模块（解决跨域请求）

文章目录

jsonp模块——解决跨域请求

node实现jsonp

优化

cors——解决跨域请求

猜你喜欢