关于跨域与服务器代理的问题(vue、jquery-ajax、axios、resource、proxytable)

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


跨域指的是在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标签引用:

<script>

function callbackData(jsondata){}

</script>

<script src='http://abc.com/abc.html?callback=callbackData'></script>


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'} 

        }

}

推荐阅读更多精彩内容

  • 什么是跨域? 2.) 资源嵌入:、、、等dom标签,还有样式中background:url()、@font-fac...
    电影里的梦i阅读 1,438评论 0 5
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    他在发呆阅读 466评论 0 0
  • https://mp.weixin.qq.com/s/oDlNovSF8tXlSIeXUD0n9w 什么是跨域? ...
    流动码文阅读 639评论 0 6
  • 什么是跨域?跨域是指一个域下的文档或脚本试图去请求另一个域下的资源,这里跨域是广义的。广义的跨域:1.) 资源跳转...
    LeiLv阅读 8,060评论 2 106
  • 1. 什么是跨域? 跨域一词从字面意思看,就是跨域名嘛,但实际上跨域的范围绝对不止那么狭隘。具体概念如下:只要协议...
    w_zhuan阅读 106评论 0 0