1.使用JSONP格式实现跨域

在nodejs中使用http内…跨域是为了解决浏览器请求域名协议端口不同的接口相同的接口是不需要实现跨域的。

1.使用JSONP格式实现跨域

在nodejs中使用http内置模块起一个服务端口号为3000

const

http.createServer((req,res){if(req.url

/favicon.ico)

//若加上true这个参数query字符串参数会自动转成对象格式//设置头部信息

状态为200

如果要返回html片段这设置为text/htmlres.writeHead(200,

Content-Type:

{code:200,message:jsonp形式返回给前端}//返回一个JSON调用的函数res.end(toFront(${JSON.stringify(obj)}))}else{//简单处理了res.writeHead(404,

Content-Type:

server.listen(3000,(){console.log(服务已启动)

script

typetext/javascript//jsonp跨域步骤//1.动态创建一个script标签const

newscript

document.createElement(script)//2.src指向接口的地址newscript.src

http://localhost:3000/api/datadocument.body.appendChild(newscript

}/script

核心是将响应的数据头部设置一个access-control-allow-origin:*允许所有接口来访问浏览器把浏览器允许的接口设置开放就好了。

若不设置会出现明显的跨域报错问题

下面设置下头部信息

http.createServer((req,res){if(req.url

/favicon.ico)

//若加上true这个参数query字符串参数会自动转成对象格式//设置头部信息

状态为200

如果要返回html片段这设置为text/html//核心代码需要将头部的access-control-allow-origin

Content-Type:

application/json,access-control-allow-origin:*});if(pathname

数据const

{code:200,message:cors形式返回给前端}//返回一个JSON调用的函数res.end(${JSON.stringify(obj)})}else{//简单处理了res.writeHead(404,

Content-Type:

server.listen(3000,(){console.log(服务已启动)

客户端请求

//cors跨域fetch(http://localhost:3000/api/data).***n(resres.json()).***n(resconsole.log(res))

结果如下