前端解决跨域的三种方式

以下有几种前端解决跨域的方式，前提是服务器端不支持跨域访问，不然也不需要前端做跨域处理了，如果后端可通过CORS开放允许的请求源，也可以解决跨域问题

一. vue正向代理

这点vue自带的proxy代理就是采用这个原理。当进行跨域访问时，vue会生成一个同源的虚拟服务器，请求将发送到虚拟服务器，虚拟服务器代替你去访问目标服务器，由于服务器端不存在跨域访问的问题，所以虚拟服务器将请求到的数据再返回给你。

二.Nginx反向代理

跨域请求限制是浏览器的安全策略，服务器端并不存在跨域访问这一说。利用Nginx的地址映射，将请求发送在一个同源的中间层，但是服务器实际请求地址为目标服务器，这样就不存在跨域访问了。

例如前端项目放在"地址A"，接口放在"地址B"，Nginx服务器放在"nginxIpAddress:3000"地址。
当访问项目的时候，你访问的是nginxIpAddress:3000，nginx将你的请求映射到项目的真实地址A，同理项目中的接口请求例如nginxIpAddress:3000/api/*，nginx将接口请求映射到接口服务的真实地址B。你始终访问的是nginxIpAddress:3000端口下的地址，自然不会存在跨域问题。

三.利用Nginx为响应添加跨域头解决

将原本要请求的服务地址，改为请求nginx服务器，利用nginx地址映射将请求映射到真实的服务地址，同时需要添加两个响应头信息，一个是Access-Control-Allow-Origin，Access-Control-Allow-Methods。
Access-Control-Allow-Origin：直译过来是允许跨域访问的源地址信息，可以配置多个(多个用逗号分隔)，也可以使用*代表所有源。
Access-Control-Allow-Methods：直译过来是允许跨域访问的请求方式，值可以为 GET POST PUT DELETE…,可以全部设置，也可以根据需要设置，多个用逗号分隔。

四.jsonp

如果需要了解自行百度。。。