Sencha Cmd与后端同域开发方法

阅读更多

在用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服务器
2. 双击Tomcat服务器，Server Locations选择Use Tomcat installation，Server Options将Publish module contexts to separate XML files打上勾，保存这样，eclipse运行Tomcat时会在Tomcat目录/conf/Catalina/localhost/里单独生成项目的xml contexts文件
3. 因为eclipse里的java项目并没包含前端项目，所以在发布的时候也不会生成前端的xml contexts文件，需要手动在Tomcat目录/conf/Catalina/localhost/里添加与前端项目名同名的xml文件，内容如下： 
   
    
4. 将Tomcat目录/conf/下的 web.xml里的listings值改为true 

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

 

• 
• 大小: 53.7 KB

• 
• 大小: 193.3 KB

• 查看图片附件