node内置模块——Http模块:jsonp模块、cors模块(解决跨域请求)

文章目录

  • jsonp模块—解决跨域请求(前端解决)
    • node实现jsonp
    • 优化
  • cors—解决跨域请求(后端解决)

node编写的是服务器,如果前端向node服务器发送请求出现了跨域问题(即浏览器和node服务器的 协议,主机名,端口号任意一个不一样),就需要进行跨域请求的解决。

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>Documenttitle>
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再打开页面
输出:
node内置模块——Http模块:jsonp模块、cors模块(解决跨域请求)_第1张图片

优化

前面的写法,后端会使用到前端定义的函数,那么一旦前端的函数名进行了修改后端就会访问不到,从而出错。所以我们后端一般动态的获取前端的函数名进行调用,动态调用的话如何获取函数名呢?就是通过请求路径后面连接参数进行传递,后端再使用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>Documenttitle>
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>Documenttitle>
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模块(解决跨域请求)_第2张图片
获取到数据。

你可能感兴趣的:(Node.js,http,前端,javascript)