前端解决跨域问题

Posted 2020-11-24 7ezreal

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

　　出于浏览器的同源策略限制。同源策略（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项目可以尝试上面的正向代理方法调试。