翻滚吧，跨域君

简单描述下产生跨域的原因：当你在域名A的系统下访问域名为B的系统，这时候就会产生跨域问题。
针对此次在项目中遇到的跨域问题，小小的记录一下解决方法（本人使用的是java语言开发的web应用）。话不多说，撸代码，下面是我写一个自定义Filter(在服务端解决跨域问题)，记住要在web.xml中声明Filter。

package com.advertise.filter;

import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet Filter implementation class MyFilter
 */
//@WebFilter("/MyFilter")
public class MyFilter implements Filter {

    /**
     * Default constructor. 
     */
    public MyFilter() {
        // TODO Auto-generated constructor stub
    }

    /**
     * @see Filter#destroy()
     */
    public void destroy() {
        // TODO Auto-generated method stub
    }

    /**
     * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
     */
    public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) resp;
        response.setHeader("Access-Control-Allow-Origin", "*"); //解决跨域问题 
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE"); 
        response.setHeader("Access-Control-Max-Age", "3600"); //设置过期时间 
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, client_id, uuid, Authorization"); 
        response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // 支持HTTP 1.1. 
        response.setHeader("Pragma", "no-cache"); // 支持HTTP 1.0. response.setHeader("Expires", "0"); 
        chain.doFilter(req, resp); 
    }

    /**
     * @see Filter#init(FilterConfig)
     */
    public void init(FilterConfig fConfig) throws ServletException {
        // TODO Auto-generated method stub
    }

}

web.xml中添加

  <filter>
    <filter-name>cors</filter-name>
    <filter-class>com.advertise.filter.MyFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>cors</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

加上Filter之后，本以为可以继续接下来的工作了，结果新问题又来了。”Access-Control-Allow-Origin”不允许设置为” * “，原因很明显，ajax请求时把withCredentials属性设置为true，会将cookie传到服务器，这时就需要指定域，所以需要替换 ” * ” 为指定域，为了提高系统安全性，项目中一般也不会设置 * ，建议将允许跨域的域配置在配置文件中，每次请求时匹配访问的域是否存在配置中，成功则将该域设置在下方”http://test.com“处

response.setHeader("Access-Control-Allow-Origin", "http://test.com");

（注：支持withCredentials属性的浏览器有Firefox 3.5+、Safari 4+和Chrome，IE10及更早版本都不支持。因此，如果要求传入cookie并且兼容IE9或更低版本的ie浏览器，可以使用JSONP(目前解决跨域问题的主流处理方式是使用JSONP）

设置完毕后F5刷新，再来一次，继续出现新的问题（没完没了还），因为我们发送的是带凭据(withCredentials：true)的请求，但服务器的相应中没有包含这个头部，那么浏览器就不会把相应交给JavaScript(于是，responseText中将是空字符串，status的值为0，而且会调用onerror()事件处理程序)，这时需要在服务器端设置

response.setHeader("Access-Control-Allow-Credentials", true);

设置完成后，再次F5（天灵灵地灵灵，阿门），数据终于请求成功，哈哈！

希望此文对您有所帮助！

猜你喜欢