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

原创已于 2022-04-25 17:39:45 修改 · 5.8k 阅读

3 ·

CC 4.0 BY-SA版权

你好，如果你感觉文章不错，不如我们一起维护，我在此宣言：文章只会改进绝对不会删除，链接永不失效。大家可以大胆收藏。

文章标签：

#webpack #devServer #proxy代理 #https #proxy代理https

于 2022-04-25 13:57:43 首次发布

webpack 专栏收录该内容

6 篇文章

订阅专栏

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

本地开发环境中使用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