依靠前端解决跨域问题的几种方式

MrHaoNan 2020-05-19

首先我们先了解下跨域的概念:

出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)。

jsonp:他是一个技巧,不是一门技术,利用script标签的src属性不受跨域限制,在浏览器端定义一个函数,发请求的时候把这个函数当做参数传给服务器,然后服务器把响应数据当做函数的实参返回,他只能发get请求,

cors:在服务器端设置响应头Access-Control-Allow-Origin:*,跨域资源共享,他能处理get,post请求,但是只能兼容ie8以上,

浏览器为了安全起见,采用的同源策略,,同源指的是协议,域名,端口号,必须一致,有一个不一致就是跨域,举例:没有同源的危害:钓鱼网站可以轻松拿到别的网站的dom,获取用户的关键信息,比如账号,密码

使用代理:开发环境使用proxytable正向代理解决跨域,在config文件夹的index文件中配置,比如拿一个vue项目来说:

dev: {
            proxyTable: {
                ‘/queue-admin‘: {  // 使用"/queue-admin"来代替 API头部,可随意命名
                  //target: ‘...‘,  // 源地址 本地开发的API头部
                  target: "...",  // 配置到服务器后端的API头部
                  pathRewrite: {
                    ‘^/queue-admin‘: ‘/queue-admin‘  // 路径重写,第一个与上面相同,第二个/queue-admin 为server.context-path(服务器的上下文)
                  },
                  // 以下解决https 访问问题。上面的可以访问http
                  changeOrigin: true,
                  secure: false,
                  headers: {
                    Referer: ‘...‘
                  }
                }
            }
         }
  

反向代理:在生产环境使用nginx服务器配置反向代理,nginx就相当于一个服务器,浏览器的请求先发到nginx服务器,再由nginx服务器转发请求,解决跨域,利用反向代理可以实现负载均衡:将多个请求转发到不同的服务器;

还有一种就是采用h5的postMessage方式:

targetWindow.postMessage(data, origin);//其中data是需要发送的对象,origin是目标窗口的origin。
window.addEventListener(‘message‘, handler, false);//handler的event.data是postMessage发送来的数据,event.origin是发送窗口的origin,event.source是发送消息的窗口引用。

总结:前端和前端页面之间的跨域可以用h5的postMessage解决,前端和后端的跨域最好由后端解决,当然如果是vue项目可以尝试上面的正向代理方法调试。

相关推荐