需要先安装express和http-proxy-middleware
1.node server.js
2.node setupProxy.js
3.通过open with live server打开index.html
页面显示:"cors跨域成功!node代理跨域成功!jsonp跨域成功!"即为成功
index.html
<!DOCTYPE html>
<head>
<script>
const get = (api) => fetch(api).then(res => res.text())
let jsonp = ''
const writeJsonp = (res) => {
jsonp = res
}
Promise.allSettled([
get('http://localhost:3001/cors'),
get('http://localhost:3000/node')
]).then(res => {
res.forEach(i => {
document.write(i.value)
})
document.write(jsonp)
})
</script>
<script src="http://localhost:3001/jsonp?callback=writeJsonp"></script>
</head>
</html>
setupProxy.js
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/node', createProxyMiddleware({
target: 'http://localhost:3001',
changeOrigin: true,
onProxyRes: function onProxyReq(proxyRes, req, res) {
proxyRes.headers["Access-Control-Allow-Origin"] = "*";
}
}))
app.listen(3000, () => console.log('代理启动成功!'));
server.js
const express = require('express');
const app = express()
app.get('/cors', (req, res) => {
res.header("Access-Control-Allow-Origin", '*')
res.send('cors跨域成功!')
})
app.get('/node', (req, res) => {
res.send('node代理跨域成功!')
})
app.get('/jsonp', (req, res) => {
res.send(req.query.callback + "('jsonp跨域成功!')")
})
app.listen(3001, () => console.log('后端服务启动成功!'))