NodeJs中使用JSONP和Cors实现跨域

跨域是为了解决浏览器请求域名，协议，端口不同的接口，相同的接口是不需要实现跨域的。

1.使用JSONP格式实现跨域

实现步骤

1.  动态创建一个script标签
2.  src指向接口的地址
3.  定义一个函数和后端调用的函数名一样

实现代码 -- 在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/htmlres.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格式的文档

 2.使用cors实现跨域

核心是将响应的数据头部设置一个'access-control-allow-origin':'*'，允许所有接口来访问浏览器，把浏览器允许的接口设置开放就好了。若不设置会出现明显的跨域报错问题

下面设置下头部信息

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//核心代码需要将头部的access-control-allow-origin 设置为*res.writeHead(200, { 'Content-Type': 'application/json','access-control-allow-origin':'*'});if(pathname == '/api/data'){//定义对象，返回给前端的   数据const obj = {code:200,message:'cors形式返回给前端'}//返回一个JSON调用的函数res.end(`${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("服务已启动")
})

 客户端请求

 //cors跨域fetch('http://localhost:3000/api/data').then(res=>res.json()).then(res=>console.log(res))

结果如下