Http-proxy-middleware 报错:proxy is not a function

http-proxy-middleware升级错误:proxyisnotafunction的解决方案

Http-proxy-middleware 报错:proxy is not a function

问题重现

在使用 http-proxy-middleware 做接口代理的时候,我用如下方式:

//引入跨域中间件
let proxy = require('http-proxy-middleware');
 
//这里要注意"^/" 是匹配的路由,它会将匹配的路由进行转发,没匹配到的就不会转发。
app.use('/api', proxy({
	//目标后端服务地址
    target: 'http://www.example.org',
    pathRewrite: {
      '^/api' : ''
    },
    changeOrigin: false
}))

报了一个错误: proxy is not a function
在这里插入图片描述

解决办法

1、首先在 package.json 里面看一下你安装的 http-proxy-middleware 的版本

我看了 http-proxy-middleware 的官方文档,发现最新的 1.0.0 版本已经对模块的引用作了明确的要求

0.x.x版本的引用方式

const proxy = require('http-proxy-middleware');

1.0.0版本的引用方式

const { createProxyMiddleware } = require('http-proxy-middleware');

使用方式如下:

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
 
const app = express();
 
app.use('/api', createProxyMiddleware({
  target: 'http://www.example.org',
  changeOrigin: true
}));
app.listen(3000);
 
// http://localhost:3000/api/foo/bar -> http://www.example.org/api/foo/bar

我安装的是 1.0.x 的版本,但是引用/使用方式还是用的老版本的代码,所以不行,报错了。

参考文档

npm - http-proxy-middleware

-----------------(正文完)------------------

前端学习交流群,想进来面基的,可以加群: 685486827832485817
Vue学习交流 React学习交流

写在最后: 约定优于配置 —— 软件开发的简约原则

--------------------------------(完)--------------------------------------

我的:
个人网站: https://neveryu.github.io/neveryu/
Github: https://github.com/Neveryu
新浪微博: https://weibo.com/Neveryu
微信: miracle421354532

更多学习资源请关注我的新浪微博…好吗

在使用 `http-proxy-middleware` 时,配置 `ws: true` 不生效的问题通常与代理配置方式、环境设置或框架的集成方式有关。以下是一些可能导致 `ws: true` 不生效的原因及解决方法: 1. **确保使用正确版本的模块引入方式** 在 `http-proxy-middleware` 版本 1.X 及以上,引入方式已更改为使用 `createProxyMiddleware` 函数。如果仍然使用旧版本的写法,可能导致配置项如 `ws` 无法正确识别。 正确的引入方式如下: ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( createProxyMiddleware('/api', { target: 'http://localhost:4000', changeOrigin: true, ws: true, // 确保此项为 true pathRewrite: { '^/api': '' } }) ); }; ``` 如果使用的是 0.x.x 版本,引入方式为: ```javascript const proxy = require('http-proxy-middleware'); module.exports = function (app) { app.use( proxy('/api', { target: 'http://localhost:4000', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } }) ); }; ``` 2. **检查 WebSocket 服务是否正常运行** 即使 `ws: true` 配置正确,如果后端 WebSocket 服务未正确运行或未监听代理所指向的端口,前端也无法建立连接。确保目标服务器的 WebSocket 服务正常运行,并能响应来自代理的请求。 3. **确保代理路径与请求路径匹配** `http-proxy-middleware` 仅会代理与配置路径匹配的请求。例如,若配置路径为 `/api`,而前端请求路径为 `/websocket`,则代理不会处理该请求。因此,应确保请求路径与代理配置的路径一致。 4. **检查是否有多个代理配置冲突** 如果存在多个代理配置,可能会导致某些配置被覆盖或冲突。确保仅有一个代理配置匹配 WebSocket 请求路径,避免多个代理规则同时作用于同一路径。 5. **确认环境支持 WebSocket 代理** 某些开发环境或部署环境(如某些 CDN 或 Nginx 配置)可能不支持 WebSocket 代理。在本地开发环境中使用 `http-proxy-middleware` 时,WebSocket 代理通常可以正常工作;但在部署环境中,需额外配置如 Nginx 或 CDN 以支持 WebSocket 连接。 6. **检查是否有错误提示或日志输出** 如果 WebSocket 代理未生效,应查看浏览器控制台、Node.js 服务日志以及后端服务日志,确认是否有错误信息。例如,`WebSocket connection failed: Error during WebSocket handshake` 可能表示代理配置未正确转发 WebSocket 请求。 7. **使用 `secure: false` 忽略 SSL 证书验证(适用于 HTTPS 代理)** 如果代理目标为 HTTPS 地址且使用自签名证书,需设置 `secure: false`,否则可能导致 WebSocket 握手失败。 ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( createProxyMiddleware('/api', { target: 'https://localhost:4000', changeOrigin: true, ws: true, secure: false }) ); }; ``` 8. **确保 `setupProxy.js` 文件位于正确目录** 在使用 Create React App 等脚手架工具时,`setupProxy.js` 文件需位于项目根目录下,且不能包含任何导入语句或额外配置,否则可能导致代理配置未被正确加载。 9. **升级 `http-proxy-middleware` 到最新版本** 若使用的是较旧版本,可能存在已知的 Bug 或功能限制。建议升级到最新版本以获得更好的兼容性和功能支持。 ### 示例代码 ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function (app) { app.use( createProxyMiddleware('/api', { target: 'http://localhost:4000', changeOrigin: true, ws: true, secure: false, pathRewrite: { '^/api': '' } }) ); }; ```
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值