Ext.Ajax+Servlet+tomcate實現跨域訪問
阿新 • • 發佈:2019-02-11
最近在做後臺和前臺通訊,由於使用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,如下圖所示正確的到前臺: