前端解决跨域都有哪些手段？

1 jsonp解决跨域，缺点:只局限于GET请求；应用场景：请求第三方平台数据（比如天气数据）时使用较多

2 服务器端设置Access-Control-Allow-Origin响应头，允许前端跨域。这种办法比较便捷，前端不需要调整代码，一般企业中用的比较多

3 搭建一个本地的中间服务器，作为代理，帮助获取需要跨域的服务器的数据

4 vue项目可以进行proxy反向代理的配置，实现跨域

黑马程序员官网有成套免费视频哦，有什么不懂的可以直接过去学习。

跨域请求存在的原因：由于浏览器的同源策略，即属于不同域的页面之间不能相互访问各自的页面内容。

跨域的方式

1前端的方式: possMessage，windowname,documentdomain,imagesrc(得不到数据返回)，jsonP(scriptsrc后台不配合得不到数据返回)，stylehref（得不到数据返回)

一imgesrc,scriptsrc,stylehref 不受同源策略的影响可以加载其他域的资源，可以用这个特性，向服务器发送数据。最常用的就是使用imagesrc 向服务器发送前端的错误信息。imagesrc 和stylehref 是无法获取服务器的数据返回的，scriptsrc 服务器端配合可以得到数据返回。

二possMessage,windowname,documentdomain 是两个窗口直接相互传递数据。

（1）possMessage 是HTML5中新增的，使用限制是 必须获得窗口的window 引用。IE8+支持，firefox，chrome,safair,opera支持

（2）windowname ，在一个页面中打开另一个页面时，windowname 是共享的，所以可以通过windowname 来传递数据，windowname的限制大小是2M，这个所有浏览器都支持,且没有什么限制。

3） documentdomain 将两个页面的documentdomain 设置成相同，documentdomain 只能设置成父级域名，既可以访问，使用限制：这顶级域名必须相同

2纯后端方式: CORS，服务器代理

CORS 是w3c标准的方式，通过在web服务器端设置：响应头Access-Cntrol-Alow-Origin 来指定哪些域可以访问本域的数据，ie8&9(XDomainRequest),10+,chrom4 ，firefox35,safair4，opera12支持这种方式。

服务器代理，同源策略只存在浏览器端，通过服务器转发请求可以达到跨域请求的目的，劣势：增加服务器的负担，且访问速度慢。

3前后端结合:JsonP

scriptsrc 不受同源策略的限制，所以可以动态的创建script标签，将要请求数据的域写在src 中参数中附带回调的方法，服务器端返回回调函数的字符串，并带参数。

　　空间在展现每个UWA开放模块之前都必须请求该模块的xml源代码以进行解析，鉴于安全性等问题的考虑。但这些方法都有一定的局限性，再由本域服务器的代理来请求数据并将响应返回给客户端。

　　下面我们将以空间的开放平台为例。要解决该问题，只能让js向hi域的web服务器请求xml文件;uwa目录下，并简单介绍下spproxy的一些特性服务端的解决方案的基本原理就是;ow/、transmit的分流以及space的spproxy模块来解

　　决该跨域问题，如apache和lighttpd的mod_proxy模块，每个模块的源代码文件都是存放在act域下的/。在百度内

　　部、缺点及下一步的改进计划，简单介绍下如何通过apache的mod_proxy，由客户端将请求发给本域服务器，space这边最后开发了一个专门用于处

　　理跨域请求代理服务的spproxy模块、transmit分流，而hi域web服务

　　器则通过一定的代理机制(如mod_proxy，那么在

　　用户空间首页(hi域)中请求该xml文件时就会存在js跨域问题，用于彻底解决js跨域问题，transmit的分流功能也可以解决部分跨域问题。

　　最常用的服务器解决方案就是利用web服务器本身提供的proxy功能

要看服务器类型，如果服务器是apache

(1)修改http服务的配置文件:C:\wamp\bin\apache\Apache244\conf\httpdconf

把LoadModule headers_module modules/mod_headersso 前面的注释删除

(2)添加Header set Access-Control-Allow-Origin

<Directory />

AllowOverride none

Require all granted

Header set Access-Control-Allow-Origin

</Directory>

(3)重启http服务

如果是tomcat,比如spring MVC项目

创建一个过滤器,代码如下:

Java代码 收藏代码

package comwebfilter;

import javaioIOException;

import javaxservletFilter;

import javaxservletFilterChain;

import javaxservletFilterConfig;

import javaxservletServletException;

import javaxservletServletRequest;

import javaxservletServletResponse;

import javaxservlethttpHttpServletResponse;

import comcommondictConstant2;

import oaserviceDictionaryParam;

public class SimpleCORSFilter implements Filter{

@Override

public void destroy() {

}

@Override

public void doFilter(ServletRequest req, ServletResponse res,

FilterChain chain) throws IOException, ServletException {

HttpServletResponse response = (HttpServletResponse) res;

responsesetHeader("Access-Control-Allow-Origin", DictionaryParamget(Constant2DICTIONARY_GROUP_GLOBAL_SETTING, "AccessControlAllowOrigin"));

responsesetHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

responsesetHeader("Access-Control-Max-Age", "3600");

responsesetHeader("Access-Control-Allow-Headers", "x-requested-with");

chaindoFilter(req, res);

}

@Override

public void init(FilterConfig arg0) throws ServletException {

}

}

关键代码:responsesetHeader("Access-Control-Allow-Origin", "");

<filter>

<filter-name>cors</filter-name>

<filter-class>comwebfilterSimpleCORSFilter</filter-class>

</filter>

<filter-mapping>

<filter-name>cors</filter-name>

<url-pattern>/</url-pattern>

</filter-mapping>

这样服务器就支持ajax的跨域访问了