webpark 如何将本地访问地址http://localshot:3000修改为自己需要的访问地址https://www.example.com:3000

smart_dream2024-08-22 10:27

后端限制了只能【https://*.example.com】能访问，前端启动本地服务是【http://localhost:3000】【http://127.0.0.1:3000】,访问不到后端接口。

需要在启动浏览器访问的时候，单独配置地址栏访问参数。

项目使用的是webpark加载浏览器。

中文文档：DevServer | webpack 中文文档 | webpack中文文档 | webpack中文网

github：https://github.com/webpack

webpark版本：https://github.com/webpack/webpack/releases

1、启动https协议

2、覆盖掉locahost

3、open浏览器打开

4、配置代码

javascript 复制代码

module.exports = {
  //...
  devServer: {
    https: true,//默认情况下，开发服务器将通过 HTTP 提供服务。可以选择使用 HTTPS 提供服务
    host: 'locallogin.hrmch.com',//配置主机名和端口
    port: '8000',
};

5、访问项目，遇到问题

运行项目后，在浏览器自动打开 https://locallogin.hrmch.com:8000/

遇到问题1：显示【502 Bad Gateway】，在hosts文件里面配置 127.0.0.1 locallogin.hrmch.com

遇到问题2：显示【Invalid Host header】

在devServer里面设置下列两项

javascript 复制代码

allowedHosts: 'all',//允许你指定哪些主机名(all：所有主机)可以访问开发服务器   
disableHostCheck:true,//来禁用主机头的检查，但这会降低安全性，不建议在生产环境中使用。

6、成功访问页面

7、最终代码

javascript 复制代码

module.exports = {
  //...
  devServer: {
    allowedHosts: 'all',//允许你指定哪些主机名(all：所有主机)可以访问开发服务器
    disableHostCheck:true,//来禁用主机头的检查，但这会降低安全性，不建议在生产环境中使用。
    https: true,//默认情况下，开发服务器将通过 HTTP 提供服务。可以选择使用 HTTPS 提供服务
    host: 'locallogin.hrmch.com',//配置主机名和端口
    port: '8000',
    open: true,//告诉 dev-server 在服务器已经启动后打开浏览器。设置其为 true 以打开你的默认浏览器。
    publicPath: defaultSettings.publicPath,
    hot: true, //开启热点
    inline: true, //开启页面自动刷新
};