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再打开页面
输出：
优化
前面的写法，后端会使用到前端定义的函数，那么一旦前端的函数名进行了修改后端就会访问不到，从而出错。所以我们后端一般动态的获取前端的函数名进行调用，动态调用的话如何获取函数名呢？就是通过请求路径后面连接参数进行传递，后端再使用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
运行页面
获取到数据。