假设:
1、开发时,ExtJS App 利用 sencha app watch
启动的前端服务器地址为http://localhost:1840
2、服务端项目(后台服务器)地址为http://localhost:8080/backend
3、最后产品正式部署时,sencha app build
构建的结果,直接放在服务端项目中使用
正常情况下,开发时因为 ExtJS 前端项目地址和后台地址不是同一个,造成了下面几个问题:
1、请求地址要写完整 http://localhost:8080/backend/api/somedata
2、跨域问题
3、跳转服务器页面,地址要写完整 http://localhost:8080/backend/pages/somepage.php
这些问题可以 让 sencha 服务器代理到后台服务器实现。
sencha cmd 的 服务器(sencha app watch
)是 jetty,支持 java 项目配置文件 WEB-INF/web.xml
。
将下面的代码,保存为 WEB-INF/web.xml
,放到 ExtJS 项目根目录(即Workspace根目录):
<?xml version="1.0" encoding="UTF-8"?>
<web-app
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
metadata-complete="true"
version="2.5"
>
<!-- ==================================================================== -->
<!-- Reverse HTTP Proxy for the Sencha Cmd web server, e.g. -->
<!-- http://localhost:1841/backend/test.php will reflect -->
<!-- http://example.com/backend/test.php -->
<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
<servlet>
<servlet-name>transparentReverseProxy</servlet-name>
<servlet-class>org.eclipse.jetty.servlets.ProxyServlet$Transparent</servlet-class>
<init-param>
<param-name>ProxyTo</param-name>
<param-value>http://localhost:8080/backend</param-value>
</init-param>
<init-param>
<param-name>HostHeader</param-name>
<param-value>localhost</param-value>
</init-param>
<init-param>
<param-name>Prefix</param-name>
<param-value>/backend</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>transparentReverseProxy</servlet-name>
<url-pattern>/backend/*</url-pattern>
</servlet-mapping>
</web-app>
重新sencha app watch --j2ee
,配置文件即生效,现在可以用http://localhost:1840/backend
访问后台服务器了。