關於ajax post請求跨域問題的解決心得

　　最近啊，公司有個項目，須要作一個手機端APP的後臺管理系統。因此用到了度文本編輯框，通過了好好一番周折，終於弄好了，帶到上線的時候發現啊，只能使用ip去訪問網頁的時候上能穿圖片他不會報跨域的問題，而使用域名的時候啊，他就會報一個跨域的問題。真心頭疼啊。最後查閱了好屢次的資料終於恆公了， 爲了防止之後再次遇到這種問題，因此想隨後把這個記錄一下，也爲了方便各位大神們的指點。謝謝……

 

　　下面我說說通過這一次的問題，我瞭解的幾個問題，

　　一、ajax跨域請求的話能夠選擇多種方式， get方式很常見，他是利用jsonp去解決。

　　二、ajax poat請求須要利用cors技術，也就是設置請求頭。

　　下面是代碼。

　　 response.setHeader("Access-Control-Allow-Origin", '*');

　　還須要注意的是這個post請求啊，他有倆種狀況，一種是簡單請求，一種是複雜請求，

　　在ie裏面吧，用ip訪問，他只是一次簡單的請求，而在谷歌或者火狐等瀏覽器當中，他就會發起一塊兒複雜請求事件。

什麼是複雜請求呢？

　　就是瀏覽器會憲法一次請求去試探，你的請求頭是否被容許，是否被經過，經過的話返回200或者202等成功標識，這樣瀏覽器纔會發送真正能的請求。

　　那麼是什麼區決定的呢？ 看了很久發現是content-type值去決定的。

　　說到content-type，他是有一個默認的值，每一個瀏覽器默認的還不同，固然設置的方法也不同。

行了很少說了吧。請各位大神看代碼吧

　　後臺是java

　　首先是設置xml文件

　　

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="mergers" version="2.5">
<display-name>GateWay.Service</display-name>
<error-page>
<error-code>404</error-code>
<location>/errorpage/404.html</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/errorpage/500.html</location>
</error-page>
<context-param>
<param-name>webAppRootKey</param-name>
<param-value>gateway.root</param-value>
</context-param>
<context-param>
<param-name>log4jConfigLocation</param-name>
<param-value>/WEB-INF/classes/log4j.properties</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.util.Log4jConfigListener</listener-class>
</listener>
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>
/WEB-INF/classes/application.xml
</param-value>
</context-param>
<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>
<filter>
<filter-name>CharacterEncodingFilter</filter-name>
<filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
<init-param>
<param-name>encoding</param-name>
<param-value>UTF-8</param-value>
</init-param>
<init-param>
<param-name>forceEncoding</param-name>
<param-value>true</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>CharacterEncodingFilter</filter-name>
<url-pattern>*.action</url-pattern>
<url-pattern>*.shtml</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>spring3</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>spring3</servlet-name>
<url-pattern>*.action</url-pattern>
</servlet-mapping>

<!-- 跨域請求過濾器 -->
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>org.gateway.filter.CorsFilter</filter-class>
<init-param>
<param-name>allowOrigin</param-name>
<param-value>
http://192.168.100.67:8061,
http://cater.ypp2015.com,
</param-value>
</init-param>
<init-param>
<param-name>allowMethods</param-name>
<param-value>GET,POST,PUT,DELETE,OPTIONS</param-value>
</init-param>
<init-param>
<param-name>allowCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>allowHeaders</param-name>
<param-value>Origin,X-Requested-With,Content-Type,Accept</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>
<servlet>
<servlet-name>velocity</servlet-name>
<servlet-class>org.sinodata.framework.velocity.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>org.apache.velocity.toolbox</param-name>
<param-value>/WEB-INF/classes/toolbox.xml</param-value>
</init-param>
<init-param>
<param-name>org.apache.velocity.properties</param-name>
<param-value>/WEB-INF/classes/velocity.properties</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>velocity</servlet-name>
<url-pattern>*.shtml</url-pattern>
</servlet-mapping>
<servlet>
<servlet-name>DruidStatView</servlet-name>
<servlet-class>com.alibaba.druid.support.http.StatViewServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>DruidStatView</servlet-name>
<url-pattern>/druid/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
<session-config>
<session-timeout>7200</session-timeout>
</session-config>

</web-app>

 

 

接下來是Java代碼

public class CorsFilter implements Filter {

private String allowOrigin;
private String allowMethods;
private String allowCredentials;
private String allowHeaders;
private String exposeHeaders;

@Override
public void init(FilterConfig filterConfig) throws ServletException {
allowOrigin = filterConfig.getInitParameter("allowOrigin");
allowMethods = filterConfig.getInitParameter("allowMethods");
allowCredentials = filterConfig.getInitParameter("allowCredentials");
allowHeaders = filterConfig.getInitParameter("allowHeaders");
exposeHeaders = filterConfig.getInitParameter("exposeHeaders");

}

@Override
public void doFilter(ServletRequest req, ServletResponse res,
FilterChain chain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest) req;
HttpServletResponse response = (HttpServletResponse) res;
if (StringUtils.isNotEmpty(allowOrigin)) {
List<String> allowOriginList = Arrays.asList(allowOrigin.split(","));
if (CollectionUtils.isNotEmpty(allowOriginList)) {
String currentOrigin = request.getHeader("Origin");
if (allowOriginList.contains(currentOrigin)) {
response.setHeader("Access-Control-Allow-Origin", currentOrigin);
}
}
}
if (StringUtils.isNotEmpty(allowMethods)) {
response.setHeader("Access-Control-Allow-Methods", allowMethods);
}
if (StringUtils.isNotEmpty(allowCredentials)) {
response.setHeader("Access-Control-Allow-Credentials", allowCredentials);
}
if (StringUtils.isNotEmpty(allowHeaders)) {
response.setHeader("Access-Control-Allow-Headers", allowHeaders);
}
if (StringUtils.isNotEmpty(exposeHeaders)) {
response.setHeader("Access-Control-Expose-Headers", exposeHeaders);
}
chain.doFilter(req, res);
}

@Override
public void destroy() {

}

}

 

js代碼

$.ajax({
    type: "post",
    cache: false,
    dataType: "text",
    url: url,
    async:true,
    data:parms ,
    success: function(data, textStatus){
        var JSONObj = JSON.parse(data);
        callback1.apply(this,[JSONObj]);
    }
});

好了 今天就到這有點亂， 不經容許不得私自轉發，後果自負。