面试-前端的跨域问题

跨域：只要协议、域名、端口有任何一个不同，都被当作是不同的域；

前端碰上跨域的问题应该算是十分常见，比如地址映射，访问外部网路接口等等，而且面试中常常会问到这个，所以做下总结：

1、

document.domain跨域

浏览器有一个同源策略，其一是不能通过ajax的方法去请求不同源中的文档。其二是浏览器中不同域的框架之间是不能进行js的交互操作的。不同的框架之间是可以获取window对象的，但却无法获取相应的属性和方法；

理解：不同域的文档以及js，你可以获取这个对象，但是你无法确定对象中的元素以及方法

解决：

document.domain跨域 - iframe ：

在当前页（a.xxx.com）的js与iframe（b.xxx.com）的js中用document.domain设置同一个域名（xxx.com），这样两个页面就属于同样一个域名下，可以进行相互调用

缺点：两个域名必须属于同一个基础域名，而且所用的协议，端口都要一致，否则无法利用document.domain进行跨域

2、hash跨域

hase: URL有一部分被称为hash（就是#号及其后面的字符）-浏览器锚点定位，修改这个部分会产生浏览器历史记录，但是不影响请求发送

location.hash跨域 - iframe：

（1）父传子：

修改iframe中src的#后缀，在iframe中监听#后缀变化获取

（2）子传父：

在iframe中新增一个iframe，域名为父级的域名，然后通过parent修改#后缀：

parent.parent.location.hash = self.location.hash.substring(1)

缺点：数据直接暴露在了url中；数据容量和类型都有限

注意：IE、chrome的安全机制无法修改parent.location.hash，需要parent.location.hash = 'data’来try catch判断是否可以执行

3、postMessage跨域

使用方法：

父级使用： otherWindow.postMessage(message, targetOrigin);

iframe.contentWindow.postMessage(‘xxx’, 路径)

otherWindow:指目标窗口，也就是给哪个window发消息，是 window.frames 属性的成员或者由 window.open 方法创建的窗口

message: 是要发送的消息，类型为 String、Object (IE8、9 不支持)

targetOrigin: 是限定消息接收范围

子级使用：window.addEventListener(“message”, function(event){})

event.data : 是传递过来的数据

event.origin : 是调用postMessage方法的窗口的源URL（包括协议、域名、端口号）

event.source : 是发送消息的窗口对象

注意：要确定iframe创建完毕后加入监听，否则可能监听不到传递的信息；如果iframe中的同源页面需要使用可以在子页面中把数据存入缓存

4、jsonp跨域

适用：单纯获取不同源网页的数据

如上，jsonp时通过script导入时的回调函数进行数据获取的

$.getJSON(‘xxx?id=0&callback=?,function(jsondata)’){

    //处理获得的json数据

})

query会自动生成一个全局函数来替换callback=?中的问号，之后获取到数据后又会自动销毁-实际上就是起一个临时代理函数的作用

$.getJSON方法会自动判断是否跨域，不跨域的话，就调用普通的ajax方法；跨域的话，则会以异步加载js文件的形式来调用jsonp的回调函数

$.ajax({

url: ‘xxx’,

type: ‘get’,

dataType: ‘jsonp’, // 请求方式为jsonp

jsonpCallback: “回调函数”,// 自定义回调函数名

data: {}

})

优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；
它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；
并且在请求完毕后可以通过调用callback的方式回传结果

缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；
它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题

5、cros跨域

cros跨域的实现主要是依靠后端实现，前端只要调用方法即可，不多做介绍

6、window.name跨域

window.name：

在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的；

每个页面对window.name都有读写的权限；

window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置；

可以存储不超过2M的数据，只能是String格式的数据

与document.domain类似，window.name的跨域需要使用一个中间iframe：

var iframe = document.getElementById(‘iframe’);

iframe.onload = function () {

var window = iframe .contentWindow;

console.log(window.name);

}

iframe.src = ‘同源地址’

与 document.domain 方法相比，window.name放宽了域名后缀要相同的限制，可以从任意页面获取 string 类型的数据

7、Vue中的proxy跨域（常用）

现在Vue项目下通常都会有vue.config.js文件作为项目的配置用，如果没有可以在根目录下新建，会自动读取；

通过配置proxy就可以成功跨域：

devServer: {

proxy: {  // 配置跨域

'/api': {

    target: 'xxxx',// 真实接口

    changOrigin:true,// 允许跨域        

    pathRewrite: {i

      '^/api': ''

    }

  },

}

},

通过配置，真实的路径会被掩盖，浏览器访问的地址将会被重写成真正的路径，安全性较高

注意： 是否形成跨域，在前端的判断是根据URL的路径（window.location.protocol + window.location.hos）判断的，头部的域就是判断的标准；

如果是协议和端口造成的跨域问题“前台”是无能为力的；