跨域问题

跨域问题

最近在做纳新系统的时候，发现跨域问题，之前以为很容易解决，到手里了才发现问题一环套一环，成功解决后写个博客记录一下

首先，什么是跨域

同源策略:

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.

比如:我在本地上的域名是a.lijiyuan.com，当你请求另外一个域名一段数据来自 b.lijiyuan.com，这就是跨域了

解决跨域——1

前端错误截图：

首先，学姐根本无法访问我的servlet，去查资料，很多博客说只要设置响应头就好：

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

==结果：postman测试成功，但前端页面测试失败==

解决跨域——2

错误截图：

之后发现学姐无法取得我存入session域中的验证码的值，继续查资料 https://blog.csdn.net/sjtu_chenchen/article/details/72303129 发现，响应头设置不完整，完整解决问题需要设置：

response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Access-Control-Expose-Headers", "*");

==结果：失败==

解决跨域——3

没有放弃……之后发现一个小问题：

Access-Control-Allow-Origin不可以为'*' ，因为 '*' 会和 Access-Control-Allow-Credentials:true 冲突，
需配置指定的地址。
Access-Control-Allow-Origin：* 可以改成  http://localhost:8080

前端学姐也添加了一个函数：

xhrFields: {
      withCredentials: true
   }

这个函数

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

是用于允许客户端发送cookie，默认为false。而这个前端函数正是用于给服务端发送cookie的，这样一来就解决了session跨域问题。

---

我把这个写入了过滤器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.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.commons.httpclient.HttpStatus;

public class HeaderFilter implements Filter{

    @Override
    public void destroy() {

    }

    @Override
    public void doFilter(ServletRequest arg0, ServletResponse arg1, FilterChain arg2)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) arg1;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Methods", "*");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
        response.setHeader("Access-Control-Allow-Credentials","true");
        response.setHeader("Access-Control-Expose-Headers", "*");
        arg2.doFilter(arg0, arg1);

    }

    @Override
    public void init(FilterConfig arg0) throws ServletException {

    }

}

web.xml配置：

<filter>
      <filter-name>HeaderFilter</filter-name>
      <filter-class>com.nx.Filter.HeaderFilter</filter-class>
    </filter>
    <filter-mapping>
      <filter-name>HeaderFilter</filter-name>
      <url-pattern>/*</url-pattern>
    </filter-mapping>

参考资料：
解决问题思路：https://blog.csdn.net/u011521890/article/details/73719198
解决方法大全：https://blog.csdn.net/sjtu_chenchen/article/details/72303129
跨域详解：http://www.ruanyifeng.com/blog/2016/04/cors.html#