nodejs搭建代理服务器解决跨域问题

paipaicui

已于 2024-08-26 15:56:16 修改

阅读量211

点赞数 2

文章标签： node.js javascript express

于 2024-08-26 15:55:20 首次发布

本文链接：https://blog.csdn.net/paipaicui/article/details/141565743

版权

1.安装express、http-proxy-middleware

npm install express http-proxy-middleware

2.根据情况额外再安装一个nodemon，可以在检测到文件变化时自动重启应用程序,省去了手动重启的麻烦

npm install nodemon

搭建代理服务器 node index.js

const express = require('express')
const app = express()
const proxy = require('http-proxy-middleware');
const port = 3000
// 放在相对路径下
app.use(express.static('../test'));

// 不改变路径
app.use('/', proxy.createProxyMiddleware({
    target: 'http://localhost:5000',
    changeOrigin: true,
}));

// 添加代理
// changeOrigin
// pathRewrite重写路径
app.use('/', proxy.createProxyMiddleware({
    target: 'http://localhost:5000',
    changeOrigin: true,
    pathRewrite: {
        "^/api": ""
    }
}));

app.listen(port,()=>{
    console.log(`启动${port} start with http://localhost:${port}/`)
})

服务器目录同级创建test文件夹创建index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>this is a new request</title>
</head>
<body>
    这里有个请求
    <div id="name"></div>
    <script>
        var xhr = new XMLHttpRequest();
        // 配置请求类型、URL 以及是否异步处理
        xhr.open('GET', '/next/a', true);
        
        // 设置请求完成的回调函数
        xhr.onreadystatechange = function () {
        // 请求完成并且响应状态码为 200
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
            // 处理请求成功的响应数据
            console.log(xhr.responseText);
            } else {
            // 处理请求失败
            console.log('AJAX Request failed');
            }
        }
        };
        
        // 发送请求
        xhr.send();
    </script>
</body>
</html>

搭建接口服务器

var express = require('express');
var app = express();

app.get("/", (req, res) => {
    res.send("123");
});

app.get("/next/a", (req, res) => {
    res.send("a");
});

app.get("/api/b", (req, res) => {
    res.send("bbbbb");
});

app.listen(5000);