后端限制了只能【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、配置代码
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里面设置下列两项
allowedHosts: 'all',//允许你指定哪些主机名(all:所有主机)可以访问开发服务器
disableHostCheck:true,//来禁用主机头的检查,但这会降低安全性,不建议在生产环境中使用。
6、成功访问页面
7、最终代码
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, //开启页面自动刷新
};