Technical note

研发工具-HMR代理配置

简介

使用公司框架开发时,在HMR开发模式,前端如果使用自已封装的HttpClient,无法调用@delon/mock。

如果省略mock,直接与后端API一起联调,则需要将页面打进后端war包中,在Tomcat中测试。由于无法使用HMR,每次页面改动都要刷新页面,浪费一些时间。

通过配置HMR代理,可以将后端Tomcat 9090端口下的服务,代理到HMR 4200端口下,提升前端开发效率。

service模块配置

临时将/api/*添加到CAS例外

    <!-- begin CAS ignorePattern -->
	<context-param>
		<param-name>ignorePattern</param-name>
		<param-value>
			/api/*|.*.js|/assets/.*|.*.menu.*|/publicConfig/.*|.*./user/.*|.*.assets/i18n/[a-z]{2}\.json
		</param-value>
	</context-param>

临时将/api/*添加到JWT例外

	<!-- begin JWT ValidationWithoutCas Filter -->
	<filter>
		<filter-name>JWT ValidationWithoutCas Filter</filter-name>
		<filter-class>
			com.yourcompany.common.authentication.filter.JwtValidationFilter
		</filter-class>
		<init-param>
			<param-name>ignorePattern</param-name>
			<param-value>
            	.*/cale/api/.*,.*.assets.*,.*.publicConfig.*,.*.css,.*.js,.*.html,.*.htm,.*.json,.*.svg,.*.cale/;jsessionid=.*,.*.cale/,.*.png,.*.login/user.*,.*.login/logout.*
            </param-value>
		</init-param>
	</filter>

注意仅在本地修改,不要提交到git上

web模块配置

新建proxy.conf.json

{
  "/api": {
    "target": "http://10.30.22.xx:9090/cale",
    "secure": false,
    "logLevel": "debug"
  }
}

注意target中的ip地址不要填写localhsot或127.0.0.1,否则可能无法正确转发
映射关系为: http://localhost:4200/api/attachment -> http://10.30.22.242:9090/cale/api/attachment

修改package.json

  "scripts": {
    "hmr": "ng serve -c=hmr --proxy-config=proxy.conf.json"
  },

启动前端

npm run hmr