1. 程式人生 > >Ext.Ajax+Servlet+tomcate實現跨域訪問

Ext.Ajax+Servlet+tomcate實現跨域訪問

最近在做後臺和前臺通訊,由於使用eclipse編寫前臺不方便,所以考慮是將前臺和後臺分開開發,後臺用eclipse,前臺用WebStorm開發,但是通過Ext.Ajax+Struts2訪問時發現不能跨域,配置了兩天也沒弄好,因此暫時就拋棄了Struts2使用最原始的Servlet,在前臺編寫好之後直接通過Web.xml配置檔案更改為Struts2訪問即可,不過注意如果攔截器太多不適用次方法,我這裡只配置了一個攔截器,然後通過前臺傳的json裡的型別來區分需要什麼資料,這樣只需要配置一個攔截器即可,因此如果需要配置太多攔截器那後期配置就很多了,如果有誰Ext.Ajax+Struts2可以實現跨域訪問還請留言將方法告知我。

1、前臺RquestData.js程式碼js程式碼為:

Ext.define('MyDesktop.app.ajax.RquestData', {
	getData:function(dat){
		var data;
		/*Ext.Ajax.request({
			url:"RevAjax!doPost?data="+Ext.encode(dat),
		      timeout:6000,
		      async: false,//是否是同步
		      success: function(response, option) {	
		    	console.log(response.responseText);
		    	var rs=Ext.decode(response.responseText);
		    	data=rs;
		      },
		      failure: function(response, option) {  
		      }
		});*/
        Ext.Ajax.request({
            url:"http://192.168.0.89:8080/WincomSys/Ajax?data="+Ext.encode(dat),
            timeout:6000,
            async: false,//是否是同步
            success: function(response, option) {
                //console.log(response.responseText);
                var rs=Ext.decode(response.responseText);
                data=rs;
                console.log(data);
            },
            failure: function(response, option) {
            }
        });
        return data;
	}
});



2、後臺java程式碼:

package com.wincom.Ajax;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

public class Ajax extends HttpServlet {
	private static final long serialVersionUID = 1L;  
    
    /** 
     * @see HttpServlet#HttpServlet() 
     */  
    public Ajax() {  
        super();  
        // TODO Auto-generated constructor stub  
    }  
  
    /** 
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) 
     */  
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
    	response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type");  
        response.setHeader("Access-Control-Allow-Credentials", "true");  
        request.setCharacterEncoding("UTF-8");
    	response.setContentType("text/html;charset=UTF-8");
    	String data = request.getParameter("data");
    	System.out.println(data);
    	JSONObject revJson=JSONObject.fromObject(data);
	RevAjaxMsg revMsg=new RevAjaxMsg();
	response.getWriter().write(revMsg.onMsg(revJson).toString());
    }  
  
    /** 
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) 
     */  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {  
        //這裡是響應post請求的方法,一會我們就發post請求,所以一會的程式碼寫在這裡。這裡標記為"後臺post方法"  
    }  
}

3、專案裡的web.xml為:
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>WincomSys</display-name>
  	<!--filter>
   		<filter-name>struts2</filter-name>
   		<filter-class>org.apache.struts2.dispatcher.filter.StrutsPrepareAndExecuteFilter</filter-class>
   </filter>
   <filter-mapping>
   		<filter-name>struts2</filter-name>
   		<url-pattern>/desktop/*</url-pattern>
   </filter-mapping-->
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
    <listener>
  	<listener-class>
  		com.wincom.init.InitListener
  	</listener-class>
  </listener>
  <filter>
  	<filter-name>CorsFilter</filter-name>
  	<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  	<init-param>
    	<param-name>cors.allowed.methods</param-name>
    	<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
 	</init-param>
  	<init-param>
    	<param-name>cors.allowed.headers</param-name>
    	<param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  	</init-param>
  </filter>
  <filter-mapping>
  	<filter-name>CorsFilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>   
  <session-config>
	<session-timeout>30</session-timeout>
  </session-config> 
  <servlet>  
	  <description>This is the description of my J2EE component</description>  
	  <display-name>This is the display name of my J2EE component</display-name>  
	  <servlet-name>Ajax</servlet-name>  
	  <servlet-class>com.wincom.Ajax.Ajax</servlet-class>  
  </servlet>  
  <servlet-mapping>  
	  <servlet-name>Ajax</servlet-name>  
	  <url-pattern>/Ajax</url-pattern>  
  </servlet-mapping> 
</web-app>

其中新增的內容為:

  <filter>
  	<filter-name>CorsFilter</filter-name>
  	<filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
  	<init-param>
    	<param-name>cors.allowed.methods</param-name>
    	<param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
 	</init-param>
  	<init-param>
    	<param-name>cors.allowed.headers</param-name>
    	<param-value>Access-Control-Allow-Origin,Content-Type,X-Requested-With,accept,Origin,Access-Control-Request-Method,Access-Control-Request-Headers</param-value>
  	</init-param>
  </filter>
  <filter-mapping>
  	<filter-name>CorsFilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>   
  <session-config>
	<session-timeout>30</session-timeout>
  </session-config> 


4、實驗是從http://localhost:63342/WebApp/index.html 地址訪問:http://192.168.0.89:8080/WincomSys/中的servlet,如下圖所示正確的到前臺: