前端跨域实现JSONP、代理服务器、CORS

一、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端口已启动')

})

整理这个的是一些大企业的大佬，认真地和他们学习了很多经验以及获取了很多直观的资料，现在全部拿出来奉献给大家！

想系统学习WEB前端的朋友，可以加这边的交流裙（1146649671）学习资料、面试资料、视频资源，资源给你们拉满，不见不散哦~