建站模板与网站案例展示软文推广文章范文1000

什么是跨域问题?

跨域问题来源于JavaScript的"同源策略"，即只有 协议+主机名+端口号 (如存在)相同，则允许相互访问。也就是说JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源。跨域问题是针对JS和ajax的，html本身没有跨域问题。

查看浏览器开发者工具Console报错：

Failed to load ​​http://a.a.com:8080/A/FromServlet?userName=123​​: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '​​http://b.b.com:8080​​' is therefore not allowed access.

案例：

​​http://www.abc.com/a/b​​ 调用​​ http://www.abc.com/d/c​​（非跨域）

​​http://www.abc.com/a/b ​​调用 ​​http://www.def.com/a/b ​​（跨域：域名不一致）

​​http://www.abc.com:8080/a/b​​ 调用 ​​http://www.abc.com:8081/d/c​​ （跨域：端口不一致）

​​http://www.abc.com/a/b​​ 调用 ​​https://www.abc.com/d/c​​ （跨域：协议不同）

localhost 和 127.0.0.1 也可能存在跨域问题

解决跨域问题

常用方式：设置过滤器

1、引入servlet-api的依赖

<dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>4.0.1</version><scope>provided</scope></dependency>

2,编写跨域处理的过滤器

package com.gxa.filter;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class CorsFilter implements Filter {@Overridepublic void init(FilterConfig filterConfig) throws ServletException {}@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletRequest request= (HttpServletRequest) req;HttpServletResponse response= (HttpServletResponse) res;/* 允许跨域的主机地址 */response.setHeader("Access-Control-Allow-Origin", "*");/* 允许跨域的请求方法GET, POST, HEAD 等 */response.setHeader("Access-Control-Allow-Methods", "*");/* 重新预检验跨域的缓存时间 (s) */response.setHeader("Access-Control-Max-Age", "3600");/* 允许跨域的请求头 */response.setHeader("Access-Control-Allow-Headers", "*");/* 是否携带cookie */response.setHeader("Access-Control-Allow-Credentials", "true");//判断前端发送的是否是预请求，如果是，直接返回，并且告诉他允许的请求方式if("OPTIONS".equalsIgnoreCase(request.getMethod())) {return;}chain.doFilter(request,response);}@Overridepublic void destroy() {}
}

3,在web.xml中注册过滤器

<filter><filter-name>CorsFilter</filter-name><filter-class>com.gxa.filter.CorsFilter</filter-class></filter><filter-mapping><filter-name>CorsFilter</filter-name><url-pattern>/*</url-pattern></filter-mapping>

这样，前后端就可以解决跨域问题了