关于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]);
    }
});

好了 今天就到这有点乱， 不经容许不得私自转发，后果自负。