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

1.安装express、http-proxy-middleware

javascript">npm install express http-proxy-middleware

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

javascript">npm install nodemon

搭建代理服务器 node index.js

javascript">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

javascript"><!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 () {// 请求完成并且响应状态码为 200if (xhr.readyState === XMLHttpRequest.DONE) {if (xhr.status === 200) {// 处理请求成功的响应数据console.log(xhr.responseText);} else {// 处理请求失败console.log('AJAX Request failed');}}};// 发送请求xhr.send();</script>
</body>
</html>

搭建接口服务器

javascript">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);