node中间件接口转发,从此跨域问题无需再麻烦后端同学

4,676 阅读2分钟

跨域一直是前端同学们的一个痛,在现在vue全家桶的时代,可以使用webpack的的proxyTable配置来进行跨域开发,但没有使用vue、webpack的的老旧项目呢?看来童鞋们还是一脸懵逼,还得求后端修改服务端CORS配置。

我们前端手握node利器,使用node进行接口转发,以后再也不用求爷爷告奶奶的求后端设置跨域啦。

废话不多说,我们直接开始吧。

开始

1、先npm init初始化node项目

2、使用express、http-proxy-middleware实现,npm i express http-proxy-middleware -S安装依赖。

3、在根目录新建app.js,在app.js使用express起了个3000端口的服务,express设置跨域,我们的请求通过http://localhost:3000 来访问目标服务器http://localhost:8080

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
const path = require('path');
app.use(express.static(path.join(__dirname, 'public')));
//设置允许跨域访问该服务.
app.all('*', function (req, res, next) {
    // 设置是否运行客户端设置 withCredentials
    // 即在不同域名下发出的请求也可以携带 cookie
    res.header("Access-Control-Allow-Credentials", true)
    // 第二个参数表示允许跨域的域名,* 代表所有域名  
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Methods', 'GET, PUT, POST, OPTIONS') // 允许的 http 请求的方法
    // 允许前台获得的除 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 这几张基本响应头之外的响应头
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization, Content-Length, X-Requested-With')
    if (req.method == 'OPTIONS') {
        res.sendStatus(200)
    } else {
        next()
    }
});

var targetUrl = "http://localhost:8080";
// 拦截http://localhost:3000/admin/*  的请求,转到目标服务器:http://localhost:8080/admin/*   
app.use('/admin/*', createProxyMiddleware({ target: targetUrl, changeOrigin: true }));

app.use('/login', createProxyMiddleware({ target: targetUrl, changeOrigin: true }));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname, 'index.html'));
});

//配置服务端口
app.listen(3000, () => {
    console.log(`localhost:3000`);
});



4、使用node app.js启动服务。

测试

新建个index.html,起个新的服务端口http://127.0.0.1:5500/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script>
        $.ajax({
            type: 'post',
            url: 'http://localhost:3000/admin/polling/platformMsg',
            data: {},
            headers: {
                'Content-Type': 'application/json',
            },
            success: function (data) {
                console.log(data)
            },
            error: function (err) {
                console.log(err);
            }
        })
    </script>


</body>

</html>

index.html的请求http://localhost:3000/admin/polling/platformMsg实际上是请求到了目标服务器http://localhost:8080/admin/polling/platformMsg,接口数据返回成功。

原理

http://localhost:8080 目标服务器,没有设置跨域,如果在客户端直接请求8080端口就会报跨域错误。

http://localhost:3000 node中间间中转,因为设置了跨域,所以可以接收5500的请求,把5500的请求转发到8080服务器,8080服务器返回数据到3000,3000在返回给5500,就解决了跨域问题。

http://localhost:5500 客户端