webpack-dev-server的proxy代理https网站报错:ERR_TLS_CERT_ALTNAME_INVALID

当本地开发环境使用webpack-dev-server进行API请求,遇到远程HTTPS服务器证书错误时,可以通过修改webpack配置来解决。在proxy选项中,设置`secure:false`忽略证书错误,并使用`changeOrigin:true`改变源,确保请求正确转发。这样可以避免浏览器的安全警告,正常进行开发工作。

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

本地开发环境中使用webpack-dev-server用作对远程测试服务器的API请求的代理。远程服务器使用的是HTTPS,这时页面会报错:
在这里插入图片描述
打开vscode,终端报错:
在这里插入图片描述

[HPM] Error occurred while trying to proxy request /api/v1/home/comprehensive-search
 from localhost:8888 to https://www.xxx.com (ERR_TLS_CERT_ALTNAME_INVALID) 
(https://nodejs.org/api/errors.html#errors_common_system_errors)

解决方法:

修改webpack.config.json或webpack.config.js(原理是修改proxy代理配置,如果你是使用的vue-cli等其他技术,都是相通的。)

proxy: {
    '/api': {
        target: 'https://www.xxx.com',
        secure: false,
        changeOrigin: true
    }
}

在proxy中加上

secure: false,
changeOrigin: true

如果浏览器未给出安全警告,则不需要加secure: false,只使用changeOrigin: true

原理(webpack文档有说明)

  • 默认情况下,在 HTTPS 上运行的带有无效证书的后端服务器将不被接受。需要配置:
secure: false
  • 默认情况下,代理时会保留主机头的来源,可以将 changeOrigin 设置为 true 以覆盖此行为。
changeOrigin: true
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值