跨域前端解决方案（前端系列跨域解决方案）

跨域前端解决方案（前端系列跨域解决方案）3.这种方案是可以彻底解决网站的跨域问题的，而且可以保证整套系统的安全性问题 2.注意，保证域名和端口都是相同的，只是项目不同public class CrossDomainFilter implements filter{ @Override public void destroy() { // TODO Auto-generated method stub } @Override public void doFilter(ServletRequest req ServletResponse res FilterChain chain) throws IOException ServletException { //设置跨域请求 HttpServletResponse response = (HttpServletResponse) res; //此处i

1.使用jsonp解决跨域(不推荐，因为只支持get请求，不支持post请求)

前端AJAX请求dataType改为jsonp。

2、设置响应头允许跨域(推荐，适合小公司解决跨域问题)

1、通过fileter过滤器中写入ACCESS-Control-Allow的头信息，进行跨域访问，代码如下：

public class CrossDomainFilter implements filter{ @Override public void destroy() { // TODO Auto-generated method stub } @Override public void doFilter(ServletRequest req ServletResponse res FilterChain chain) throws IOException ServletException { //设置跨域请求 HttpServletResponse response = (HttpServletResponse) res; //此处ip地址为需要访问服务器的ip及端口号 response.setHeader("Access-Control-Allow-Origin" "http://192.168.1.1:8080"); response.setHeader("Access-Control-Allow-Credentials" "true"); response.setHeader("Access-Control-Allow-Methods" "GET HEAD POST PUT DELETE TRACE OPTIONS PATCH"); response.setHeader("Access-Control-Allow-Headers" "Origin X-Requested-With Content-Type Token Accept Connection User-Agent Cookie"); response.setHeader("Access-Control-Max-Age" "3628800"); System.out.println("设置跨域请求"); chain.doFilter(req response); } @Override public void init(FilterConfig filterConfig) throws ServletException { // TODO Auto-generated method stub } } <!--"Access-Control-Allow-Origin"表示的是访问服务端的ip地址及端口号，也可以设置为*表示所有域都可以通过； "Access-Control-Allow-Credentials"表示的是跨域的ajax中可以携带cookie，此时第一项设置不能为*，需指定域名； "Access-Control-Allow-Methods"表示的是允许跨域的请求方法； "Access-Control-Allow-Headers"表示的是允许跨域请求包含content-type头； "Access-Control-Allow-Max-Age"表示的是在3628800秒内，不需要再发送预检验请求，可以缓存该结果，一般默认。-->

2.web.xml配置filter

<!-- 跨域设置 --> <filter> <filter-name>crossFilter</filter-name> <filter-class>com.chinamobile.bcop.console.security.filter.CrossDomainFilter</filter-class> </filter> <filter-mapping> <filter-name>crossFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

3、适应Nginx搭建API网关接口(强烈推荐，因为保证域名和端口一致，以项目区分方向代理到真实的服务器地址)

1.原理：保证域名和端口都是相同的，根据项目不同名称使用nginx进行转发到真实的服务器地址

2.注意，保证域名和端口都是相同的，只是项目不同

3.这种方案是可以彻底解决网站的跨域问题的，而且可以保证整套系统的安全性问题

还有很多跨域的解决方案，这里就不赘述了。