2018年3月面试心得《跨域问题》

金三银四，换工做大季，这段时间应该很多被面到怀疑人生的孩子，就包括本宝宝。
为了下次面试不被虐到，默默的拿出小本本记录全部的问题了。
我不会告诉你写这个系列是由于昨晚接到阿里面试被虐成了渣渣而后一我的在那里尬笑了好久！！！

首先什么是跨域

浏览器有一个同源策略，为了保护用户的信息安全，你看咱们Cookie不是每次都会传给后端咩，那若是其余域名下还能够访问我这个网站的Cookie，还怎么保证数据的安全咧。

---

那么什么状况不是同一域呢～

• http或者https之类的协议不相同，即属于跨域。

例如：

http://www.baidu.com
https://www.baidu.com

• 不一样域名固然也属于跨域。

例如：

http://www.baidu.com
http://www.bilibili.com

• 不一样二级域名也属于跨域

例如：

http://www.baidu.com
http://hehe.baidu.com

• 端口不一致也属于跨域

例如：

http://www.baidu.com:8080
http://www.baidu.com  /* 默认端口是80，因此咧，你80的端口能够直接输入地址的*/

那么，接下来就会问你跨域的方式有哪些。
固然有的面试官还不给人机会扯上面我刚刷上的技能点就开始问下一道问题，啊西吧。

---

跨域的几种方式

嘿嘿，首先列一下经常使用的几种。

1. proxy代理
2. cors
3. JSONP
4. xdr （这个呢，是针对ie八、9的解决方式，由于我最常写的是移动端的，因此这个也了解的很少。）

扯点闲话，我是16年年末才开始接触到跨域这种东西的，以前懵懂阶段在css和js上面撞的头破血流，固然如今这俩也没有对我有多友好，只有我待他们如同亲孙子通常的爱护。哼！
生硬的文字让人想睡觉啊…………
可是你要想你每多回答对一道题，你的工资也许就往上涨1k啊！！！
虽然以上是个人猜测，不过仍是有机会的，咩哈哈哈哈哈哈哈哈……哈…哈…哈……

---

咱们如今比喻一下。

我当前在的这个域就是一个房子，跨域就是我要去拿隔壁房子里的东西，由于同源政策，因此我不能把手伸出房子的窗户，可是我能够从窗户口去拿取或者丢出东西。

下面来详细说说这几个代理的方式哈，通常问的比较多的就是二、3了，若是对代理没兴趣直接下拉一下就看到了。

---

proxy代理

这个就很好理解啦，所谓的同源政策不是浏览器发出的咩。
就像个人手只能在我本身的屋子里伸，只能够经过这个窗户口出去，烟囱什么其余地方我都伸不出去。
那么我找一个站在我窗口的人，借助他的手把个人请求丢给隔壁屋子的人，而后再借用他的手把我要的东西还给我。

经常使用的工具备ngnix、webpack。

先说webpack吧，你看vue脚手架里面，配置代理十分的简单，只须要在config目录找到index.js，dev里添加proxyTable就好啦。

proxyTable: {

      '/api': {

            target: 'http://aa.bb.com:8989', // 你接口的域名  http://aa.bb.com:8989

            //secure: false,      // 若是是https接口，须要配置这个参数

            changeOrigin: true,     // 若是接口跨域，须要进行这个参数配置

            pathRewrite: {

              '^/api': ''//这里理解成用‘/api'代替target里面的地址，后面组件中咱们掉接口时直接用api代替 
            //好比我要调用'http://aa.bb.com:8989/hahahah'，直接写‘/api/hahah'便可

            }

        }

  　},

而后ngnix的配置是这样的，修改nginx.conf里面的server里面的location里面的proxy_pass。
嘿嘿嘿嘿看不懂不要紧，我写个例子。

server {
    listen       80;                                                         
    server_name  0.0.0.1; // 你本身页面里面写的请求地址

    #默认请求
    location / {
        proxy_pass http://aa.bb.com/; // 帮你转到你真正要请求的地址
    }
}

大体是这样的，其他的要去看文档哦，看文档的宝宝是最棒的。

---

cors（Cross-origin resource sharing）

哇塞这个就碉堡了，几乎全部浏览器都支持，可是ie必须10以上。
这是啥呢，其本身翻译英文去。 _

这里丢上阮大神的文章
连接描述

嗯嗯若是想详细了解的话，能够去看看。

我这里大体借用阮老师的话总结一下。

跟JSONP比较：

JSONP只支持GET请求，CORS支持全部类型的HTTP请求。JSONP的优点在于支持老式浏览器，以及能够向不支持CORS的网站请求数据。

请求方式：

要在服务器端的response header里面加一个 Access-Control-Allow-Origin: 指定域名|| ( 表示全部域名均可以跨域), 浏览器端即可以发起post的跨域请求。

说实话我对这个也不是特别的了解，因此之后了解到仍是会补充哒～

---

JSONP

终于到你了，这个让我悲喜交加的朋友。
我以前面试也问过这个问题，个人回答大都是……

静态文件不受同源政策影响，我能够返回一个script里面有一个回调函数，函数的里面是我要的东西。

通常这么说普通面试官都能被我忽悠过去了，可是！！！！
可是总有忽悠不过去的！！！
这里仍是简单介绍一下吧，原理能够简单说明，但是基础知识不能，仍是要补的。
先丢上我朋友发个人一张图

首先：咱们从基础的提及。
我如今有两个js

a.js

var name = '啊西吧～'

b.js

console.log(name)

先运行a，再运行b，咱们的name就出来了。
jsonp自己也就是这样的。

jsonp的原理就是手动建立script，而后script.src = 'b.js'。

能够简单的说，咱们的步骤是这样的：
建立a.js => 请求数据、建立b.js => 运行b.js而后调用a.js

其中跨域的地方，就藏在第二点这里。

a.js

function a(data) {
    alert(`我是从${data.url}网站来的，我叫${data.name}`)
}

b.js（经过设置这个script的src

a({url: '尼叩', name: '大吉祥'})

嗯嗯结束了。
其实并无，关于这个我查了很多资料，有的对有的错，可是至少使用上来看这么理解比较简单一点……
具体各位宝宝仍是要多看看基础哒。

---

xdr

不得不说，这个我没用过，待朕去查询一番。

………………
………………
………………
好了我找完了。

首先打开官方文档，给他一个介绍。

经过使用 Internet Explorer 8 中的跨域请求（缩写为“XDR”），开发人员能够建立跨网站数据聚合方案。 这个名为 XDomainRequest 的请求与 XMLHttpRequest 对象相似，但编程模型更加简单，它能够提供一种最简单的方式来向支持 XDR 的第三方站点发出匿名请求，并选择使这些站点的数据可跨域使用。 只需三行代码便可生成基本的跨站点请求。 这将确保针对公共站点（例如，博客或其余社交网络应用程序）的数据聚合简单、安全和快速。

可是由于我没怎么遇到过，我相信如今也仍然有很多公司须要兼容ie低级浏览器，不过也是很大部分不须要兼容的，因此详细去看可能让你犯困～
那我来总结一下。

由于咱们强大而坚挺的ie低版本浏览器并不支持cors的跨域方法，这个时候xdr就诞生了。
它实现了CORS的部分规范，只支持GET/POST形式的请求。另外在协议部分只支持http和https。

在服务器端，依旧要求在响应报头添加"Access-Control-Allow-Methods"标签（这点跟CORS一致）

使用方法以下：

建立一个XDomainRequest的实例，调用open()方法，再调用send()方法。但与XHR对象的open()方法不一样，XDR对象的open()方法只接收两个参数：请求的类型和URL，由于全部XDR请求都是异步执行的，不能用它来建立同步请求。

请求返回以后，会触发load事件，相应的数据也会保存在responseText属性中

---

哎呀终于打完了，蜜汁感动。
面试嘛，其实就是掏你底细的一种办法，我仍是小白一只，虽然用过三大框架，可是基础仍是比较弱的，刚从爬电线杆的专业转过来，无论怎么说这一路仍是有人帮忙的，很是幸福～

面试了好久，最后愈来愈明白，其实真的框架是工具，能够帮你不少，可是最重要的仍是基础。
因此基础很差的宝宝们，咱们之后一块儿来补呀～～～

么么哒～