常见JavaScript报错分析

作为一名前端开发工程师，我们在开发中经常会遇到跨域这个问题。今天想从跨域的原理说起，接着到解决方案，最后到框架对跨域的封装。

---

跨域指的是在URL访问地址中的协议、域名、端口任意一个不同，都被称为跨域访问。

先对一个URL进行部分的拆分：

如果单独针对前端不涉及服务器，那么是无法处理端口、协议不同的情况，要解决这种情况，必须涉及到服务器，使用代理等方法，后面会简单讲解一下。

---

CORS（Cross-Origin Resource Sharing 跨域资源共享）

大家最经常使用的跨域解决方案是：CORS（Cross-Origin Resource Sharing 跨域资源共享）

CORS解决跨域的方法是使用XMLHttpRequest对象，有使用过Ajax的同学应该是相当清楚的。不懂的同学，可以自行百度一下，或者迟点我找一下我以前的笔记，再弄成一篇简单的文章。

注意:需要前后端统一http的请求头。

使用post方式进行Ajax请求

​ var xhr = new XMLHttpRequest();

​ xhr.open(“post”,”url”,”true”);

​ //post方式需要自己设置http的请求头

​ xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

​ //post发送数据

​ xhr.send(“name”+uaername);

CORS和Ajax的方法几乎一样，不同的是在使用open方法上。

ajax:

​ 使用的是相对路径：xhr.open(‘get’,’/abc’,true);

CORS:

使用的是完整URL路径：xhr.open(‘get’,’https://api.douban.com/v2/movie/top250?count=10‘,true)

服务器端对于CORS的支持，主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置，就可以允许Ajax进行跨域的访问。

---

jsonp跨域

jsonp优点：不是太受同源策略的限制，大多数浏览器都支持，兼容性好。

jsonp缺点：只支持get请求，不支持POST请求，不能解决不同域的两个页面之间进行js调用问题。

jsonp是运用src请求不同域，执行回调函数（可带返回数据），这也是我们用script标签可以调用cdn上的脚本的一个原因。再说回XMLHttpRequest，这种方式是无法请求得到不同域上的数据的。

1、普通的脚本script标签引用：

function callbackData(jsondata){}

2、jquery请求jsonp:

$.ajax({

​ url:’http://abc.com/abc.html‘,

​ dataType:’jsonp’,

​ jsonp:’jsonpcallback’,

​ success:function(data){

​ //处理返回函数

​ }

})

3、vue-resource请求jsonp:

this.$http.jsonp(‘https://api.douban.com/v2/movie/top250?count=10‘,{},

{

​ headers:{ },

​ emulateJSON: true

}).then(

​ function(response) {

​ // 这里是处理正确的回调

​ },function(response) {

​ // 这里是处理错误的回调

});

4、开发者自己封装一个jsonp，只简单说一下思路：

​ 其实就是用js代码动态创建一个script标签

5、vue-axios是不支持jsonp

---

document.domain跨子域（主域相同）

在前端开发中，不同域的文件是不可直接调用使用的，但可以相互获取到window对象，不过获取到的window对象，却无法直接在不同域中使用其中的属性和方法。

每个域中都有一个document.domain属性，只要我们在各自的域中设置document.domain统一一致，就可以实现跨域调用了。设置document.domain时，必须设置成自身或更高级的父域，且主域必须相同，对于url地址中的主域、父域的了解请自行百度，网上很多相关的文章。

http://www.abc.com/a.html 与 http://abc.com/b.html 是同一主域：abc.com

---

window.name

在一个窗口(window)的生命周期内,窗口载入的所有的页面都是共享一个window.name的，每个页面对window.name都有读写的权限，window.name是持久存在一个窗口载入过的所有页面中的，并不会因新页面的载入而进行重置。但window.name是一个字符串值。我们在使用它时要懂得对字符串进行解释。

window.name 的缺点：1、我们虽然可以通过类似iframe这种形式来获取异域的数据，但还是得在访问后把src设置成同源地址。2、把我们需要的数据放在一个共享的window.name属性上，使开发变得麻烦、不友好、安全问题严重。所以这种方法得不到开发者们的认可。

---

使用HTML5的window.postMessage方法跨域

window.postMessage(message,targetOrigin) 方法是html5新引进的特性，可以使用它来向其它的window对象发送消息，无论这个window对象是属于同源或不同源，目前IE8+、FireFox、Chrome、Opera等浏览器都已经支持window.postMessage方法。

调用postMessage方法的window对象是指要接收消息的那一个window对象，该方法的第一个参数message为要发送的消息，类型只能为字符串；第二个参数targetOrigin用来限定接收消息的那个window对象所在的域，如果不想限定域，可以使用通配符 * 。

需要接收消息的window对象，可是通过监听自身的message事件来获取传过来的消息，消息内容储存在该事件对象的data属性中。

---

vue-proxytable服务器代理跨域

我们在使用vue开发时，如果使用的是vue-cli脚手架webpack开发模板时，我们可以在生成的项目中找到文件夹名为config，这个文件是与webpack配置相关，其中包括使用nodejs生成的服务器，在该文件夹下可以找到index.js文件，这个文件就是webpack的最基本配置，proxytable就在这个文件里面。

vue-proxytable是使用服务器代理来实现跨域的，对于服务器代理，我不做详细的解析，感兴趣的同学可以自行百度。其中想深入了解的vue-proxytable的同学可以了解http-proxy-middleware。

proxytable的大概配置：

proxyTable:{

‘/list’://url输入的相对路径

​ {

​ target:’http://api.xxxxxxxx.com‘,//实际映射到的目标地址

​ changeOrigin:true,//TRUE为本地虚拟服务器来接收、发送请求

​ pathRewrite: {‘^/list’:’/list’}

​ }

}