目录
什么是跨域问题
为什么限制访问
解决
什么是跨域问题
域是指从一个域名的网页去请求另一个域名的资源。比如从www.baidu.com 页面去请求 www.google.com 的资源。但是一般情况下不能这么做,它是由浏览器的同源策略造成的,是浏览器对js施加的安全限制。跨域的严格一点的定义是:只要 协议,域名,端口有任何一个的不同,就被当作是跨域。
所谓同源是指,域名,协议,端口均相同,只要有一个不同,就是跨域.
URL | 说明 | 是否允许通信 |
http://www.a.com/a.js | 同一域名下 | 允许 |
http://www.a.com/lab/a.js | 同一域名下不同文件夹 | 允许 |
http://www.a.com:8000/a.js | 同一域名,不同端口 | 不允许 |
为什么限制访问
如果一个网页可以随意地访问另外一个网站的资源,那么就有可能在客户完全不知情的情况下出现安全问题。既然有安全问题,那为什么又要跨域呢? 有时公司内部有多个不同的子域,比如一个是location.company.com ,而应用是放在app.company.com , 这时想从 app.company.com去访问 location.company.com 的资源就属于跨域
解决
此处我们只讨论后端的解决方式,叫做跨域资源共享(CORS)
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许ajax进行跨域的访问。
在idea中我们通过配置过滤器和web.xml来实现跨域访问
public class CorsFilter implements Filter {
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain)
throws IOException, ServletException {
HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
HttpServletRequest httpRequest = (HttpServletRequest) servletRequest;
//允许携带Cookie时不能设置为* 否则前端报错
httpResponse.setHeader("Access-Control-Allow-Origin", httpRequest.getHeader("origin"));//允许所有请求跨域
httpResponse.setHeader("Access-Control-Allow-Methods", "*");//允许跨域的请求方法GET, POST, HEAD 等
httpResponse.setHeader("Access-Control-Allow-Headers", "*");//允许跨域的请求头
httpResponse.setHeader("Access-Control-Allow-Credentials", "true");//是否携带cookie
filterChain.doFilter(servletRequest, servletResponse);
}
}
<filter>
<filter-name>corsFilter</filter-name>
<filter-class>com.webback.filter.CorsFilter</filter-class>
</filter>
<!--配置进入过滤器的映射地址 -->
<filter-mapping>
<filter-name>corsFilter</filter-name>
<url-pattern>/*</url-pattern>
</filter-mapping>