经常使用的解决跨域的几种方法

对于跨域,每个前端同窗都不陌生,关于如何解决跨域也有不少种方法,这里我就总结一下什么是跨域、为何会跨域以及我经常使用的解决跨域的几种方式。

跨域

浏览器同源策略: 浏览器限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
同源策略的具体表现:
  1)http请求不能向不一样源的服务器发起HTTP请求
  2)非同源的网页不能共享Cookie、LocalStorage、IndexDB
  3)禁止对不一样源页面的DOM进行操做。主要场景是iframe跨域的状况,不一样域名的iframe限制相互访问
同源: 请求URL地址中的协议、域名及端口号都相同,只要有一个不相同就是跨域。
  例子:
    域名: http://www.example.com
    跨域请求:
      https://www.example.com //协议不一样
      http://api.example.com //域名不一样
      http://www.example.com:8080 //端口号不一样

解决跨域的经常使用几种方案

解决方案:
  1)jsonp
  2)nginx反向代理
  3)配置vue-cli生成的文件实现代理
  4)后端设置CORS来解决跨域
注: 2、三两种都是服务器代理,由于跨域是浏览器的跨域限制,可是服务器不存在跨域问题,因此能够由服务器请求所要访问的资源而后再返回给客户端

JSONP

jsonp实现原理: <script>标签不受浏览器同源策略的影响,容许跨域引用资源。所以能够经过动态建立script标签,而后利用src属性进行跨域。
JSONP实现方式: 动态建立script标签,经过回调函数处理请求结果
JSONP的优势:
  1)能够跨域
  2)兼容性好
JSONP的缺点:
  1)只能支持GET请求,JSONP在调用失败时不会返回各类HTTP状态码
  2)安全性。若是提供JSONP的服务被人控制,那么全部调用这个JSONP的网站都存在漏洞。
下面是经过JSONP调用百度搜索的例子:

//HTML
<div class="wrap">
        <input type="text">
        <ul></ul>
</div>
//JS
let inpEle = document.querySelector('input');
    let ulEle = document.querySelector('ul');
    let interval = 0;

    function searchData(data) {
        if (data.g) {
            let result = data.g;
            let fragment = document.createDocumentFragment();
            let html = '';
            result.forEach( (item) => {
                html += `<li><a target="_blank" href="https://www.baidu.com/s?wd=${item.q}">${item.q}</a></li>`;
            } )
            ulEle.innerHTML = html;
        } else {
            ulEle.innerHTML = '';
        }
    }

    let scriptEle = null;
    inpEle.oninput = search;
    function search() {
        let val = inpEle.value;
        let now = new Date().getTime();

        if (now - interval > 300) {
            if (scriptEle) {
                scriptEle.remove();
            }
            scriptEle = document.createElement('script');
            // wd后面接的是关键字,cb后面接的回调函数的名称
            let url = 'https://www.baidu.com/sugrec?ie=utf-8&json=1&from=pc_web&prod=pc&wd='+ val + '&req=2&cb=searchData'
            scriptEle.src = url;
            document.body.appendChild(scriptEle);
        } 
    }

nginx反向代理

具体配置:
  1)安装nginx: http://nginx.org/en/download.... ,在其中选择要安装的版本,安装完成后解压
  2)配置要被代理的服务:
    在nginx-1.16.1 ==> conf ==> nginx.conf里进行配置(代码中找到server在里面添加代理便可):

server{
       listen               80; //监听的端口
       server_name          localhost; // 在浏览器访问的host-name,根据这个来判断要代理到什么地方
        //    要代理的内容

// 第一步(能够不用)  进行反向代理,用localhost:80来代理http://127.0.0.1:8081的请求,能够根据本身起的本地服务器来进行修改
            location / {
                proxy_pass  http://127.0.0.1:8081;
            }

            // 第二步  接口代理,在/api的前面添加添加上指定的域名
            location /api {
                proxy_pass http://1.1.1.1:8080;  // 将/api的接口反向代理到这个服务器上,从而实现了跨域
            }
   }

  注:第一步是须要本地用编辑器起一个服务器,而后nginx作反向代理,从而实如今80端口下,访问非80端口的页面,这个配置完成后,浏览器的访问地址应该改成 localhost/index.html ；如果不想这么麻烦,能够在先将nginx-1.16.1 ==> html下的页面删掉,而后将代码移动到该位置便可,访问的地址为 http://localhost/index.html
  3)启动nginx.exe

vue代理配置

vue代理配置:
  

CORS

这个主要是后端作的,我就不说了,具体百度就能够。

以上就是我经常使用的几种跨域解决方案,若是你们有什么好的方法,欢迎赐教。

参考资料:
  浏览器同源策略及跨域的解决方法: https://www.cnblogs.com/laixi...
  MDN上的同源策略: https://developer.mozilla.org...
  MDN上的CORS: https://developer.mozilla.org...