关于前端:前端跨域实现JSONP代理服务器CORS

7次阅读

共计 812 个字符,预计需要花费 3 分钟才能阅读完成。

一、JSONP

JSONP(JSON with Padding),前端 + 后端⽅计划,绕过跨域。前端结构 script 标签申请指定 url(由 script 标签收回的 get 申请不受同源限度);服务器返回一个函数执行语句,函数与查问参数 callback 值对应,函数的参数为服务器返回的 json 数据;改函数在前端执行后即可获取数据。

如下结构 3000 端口的服务拜访客户端页面,而后去申请 4000 端口下的服务~~~~
客户端 ===》
<script>
function showInfo123(data) {

console.log('showInfo123', data)
document.writeln(`Response: ${JSON.stringify(data)}`)

}
</script>
<script src=”http://127.0.0.1:4000/getUser?callback=showInfo123″></script>
服务端 ===》
const http=require(‘http’);
const urlModule = require(‘url’)
const server = http.createServer((req,res)=>{
const {method}=req;
const {pathname: url, query} = urlModule.parse(req.url, true)
if (method == ‘GET’ && url == ‘/getUser’) {
var data = {

name: 'luna',
age: 18,
gender: 'female'

}
var scriptStr = ${query.callback} (${JSON.stringify(data)})
console.log(scriptStr)
res.end(scriptStr)
}
})

server.listen(4000,()=>{
console.log(‘4000 端口已启动 ’)
})

正文完
 0