cors,node代理,jsonp三种方式解决跨域问题

421 阅读1分钟
需要先安装express和http-proxy-middleware
1.node server.js // 启动node服务,模拟后端接口
2.node setupProxy.js // 启动node代理服务,转发请求
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('后端服务启动成功!'))