Sencha Cmd与后端同域开发方法

zmminer 2015-10-21

在用Sencha Cmd做ExtJs项目时遇到了这样的问题:

  • 前端通过Sencha Cmd构建,eclipse+spket开发,前端运行使用sencha app watch查看,默认地址为:http://localhost:1841。
  • 后端通过eclipse创建SpringMVC+MyBatis+Tomcat,使用eclipse运行tomcat,默认地址为:http://localhost:8080/项目名。

这样一来,当通过http://localhost:1841访问的前端去异步获取http://localhost:8080/项目名的数据时便会报跨域的错误,无法正常获取数据,错误信息如下:

XMLHttpRequest cannot load http://localhost:8080/vsmsserver/home/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1841' is therefore not allowed access.

 
当然,我们可以通过JsonP或CORS进行跨域操作,但这样会修改项目代码,并且有兼容性问题。

解决这个问题的思路是把前端项目和后端项目都加入到Tomcat里,让访问前端的URL和后端保持一致,并通过eclipse启动tomcat以方便开发。以下是我的方法:

      1. eclipse里删除并重新添加Tomcat服务器Sencha Cmd与后端同域开发方法
      2. 双击Tomcat服务器,Server Locations选择Use Tomcat installation,Server Options将Publish module contexts to separate XML files打上勾,保存Sencha Cmd与后端同域开发方法这样,eclipse运行Tomcat时会在Tomcat目录/conf/Catalina/localhost/里单独生成项目的xml contexts文件
      3. 因为eclipse里的java项目并没包含前端项目,所以在发布的时候也不会生成前端的xml contexts文件,需要手动在Tomcat目录/conf/Catalina/localhost/里添加与前端项目名同名的xml文件,内容如下: 
        <?xml version="1.0" encoding="UTF-8"?>
        <Context docBase="/Users/Chen/Works/Works/vsms/vsms" path="/vsms" reloadable="true"/>
         
      4. 将Tomcat目录/conf/下的 web.xml里的listings值改为true 

这样,当eclipse运行tomcat便启动了前端和后端的服务,并且URL为http://localhost:8080/前端(后端)项目名,便实现了同域操作。
sencha app watch的命令行窗口还是需要运行的,当sass或代码改变后它能自动编译并给予提示,会方便很多,只是不再通过http://localhost:1841来调试页面。

相关推荐