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,如下图所示正确的到前台:




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值