以下有几种前端解决跨域的方式,前提是服务器端不支持跨域访问,不然也不需要前端做跨域处理了,如果后端可通过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
如果需要了解自行百度。。。