关于ajax post请求跨域问题的解决心得

最近啊，公司有个项目，需要做一个手机端APP的后台管理系统。所以用到了度文本编辑框，经过了好好一番周折，终于弄好了，带到上线的时候发现啊，只能使用ip去访问网页的时候上能穿图片他不会报跨域的问题，而使用域名的时候啊，他就会报一个跨域的问题。真心头疼啊。最后查阅了好多次的资料终于恒公了， 为了防止以后再次遇到这种问题，所以想随后把这个记录一下，也为了方便各位大神们的指点。谢谢……

 

　　下面我说说经过这一次的问题，我了解的几个问题，

　　1、ajax跨域请求的话可以选择多种方式， get方式很常见，他是利用jsonp去解决。

　　2、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]); }});

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