express服务器代理解决跨域

在无框架的HTML项目中遇到跨域问题,通过搭建Express服务器并利用express-http-proxy中间件来创建代理。首先全局安装express-generator,然后创建应用结构,接着安装express-http-proxy。在app.js中配置代理规则,将请求转发到指定地址,从而在本地调试时解决跨域。只需访问http://localhost:3000/katsuki/api,即可代理到目标API。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在工作中遇到了无框架的html项目结构,本地调试必然跨域

搭建express

没安装过需要全局安装一次

npm install -g express-generator@4

在一个文件夹里面用express命令创建应用架构

express katsuki
cd katsuki

express-http-proxy

安装,详细使用方法点击查看express-http-proxy

npm i express-http-proxy --save

app.js中添加

var proxy = require("express-http-proxy");
const proxyConfig = {
  URL: "10.10.10.10",
  PORT: "2333",
};
// 访问 http://localhost:3000/katsuki/api
// 转换 http://10.10.10.10:2333/api
app.use(
  "/katsuki",
  proxy("http://" + proxyConfig.URL + ":" + proxyConfig.PORT)
);

把项目结构放到public下调用如http://localhost:3000/katsuki/api;实现服务器代理解决跨域,仅适用本地调试。

### 解决前端问题的代理服务器配置 在开发环境中,为了应对CORS(资源共享)带来的挑战,一种常见的做法是在前端项目中配置代理服务器。这使得即使前后端不在同一名下工作,也能让浏览器认为这些请求来自同一个源[^1]。 #### 使用 `http-proxy-middleware` 配置 Vue 开发服务器代理 对于基于 Vue CLI 构建的应用程序来说,可以通过安装并设置 `http-proxy-middleware` 来实现这一目标: ```bash pnpm i http-proxy-middleware --save-dev ``` 接着,在项目的根目录创建或编辑现有的 `vue.config.js` 文件,加入如下代码片段以定义代理规则: ```javascript module.exports = { devServer: { proxy: { '/api': { // 所有以 /api 开头的 URL 将被重定向到目标地址 target: 'http://localhost:3000', // 后端 API 的实际位置 changeOrigin: true, // 更改主机头部为目标URL pathRewrite: {'^/api' : ''} // 移除路径中的/api前缀 } } } }; ``` 上述配置意味着当客户端尝试访问 `/api/some/path` 这样的路由时,实际上会向 `http://localhost:3000/some/path` 发送请求;而这一切都发生在后台,对开发者而言几乎是透明的过程[^4]。 这样做的好处在于无需修改现有API接口调用方式即可轻松绕过由浏览器施加的安全限制,同时也简化了开发流程,尤其是在调试阶段非常有用[^3]。 #### 实际应用案例 假设存在一个位于 `http://localhost:8080` 上运行的Vue应用程序以及一个提供RESTful服务的Node.js Express服务器处于 `http://localhost:3000` 。如果没有适当处理,则从前者发起至后者的HTTP GET 或 POST 请求可能会遭遇错误提示。但是按照上面介绍的方法设置了代理之后,所有指向 `/api/*` 的请求都会自动转发给 Node.js 应用,并且由于它们看起来像是从相同的来源发出的一样,因此不会触发任何 CORS 错误消息[^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值