欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

对于跨域的详细介绍

程序员文章站 2022-03-25 21:53:20
...
要学习跨域策略,首先要知道为什么跨域:

  浏览器的同源策略,出于防范跨站脚本的攻击,禁止客户端脚本(如 JavaScript)对不同域的服务进行跨站调用。

具体点来说,网站请求的协议名protocol、 主机host、 端口号port的其中一个不同,网站之间的数据传输就形成了跨域调用。

这篇文章的所有例子均使用Node.js作为服务端进行的,同时是对端口号不同的情况来举例子,本次将会使用3001和3002俩个

端口号。

首先,构建一个表单,如图:

  对于跨域的详细介绍

对于正常的非跨域的请求,一般是这样子的:

html

对于跨域的详细介绍

前端js部分(ajax)

对于跨域的详细介绍

服务端的代码:

对于跨域的详细介绍

注:此处读取post方法的内容是使用了Node.js的formidable模块,之后所有的post的数据,均使用此模块接受

请求页面返回的结果是:

对于跨域的详细介绍

现在的返回结果是属于访问3001端口的,那么如果访问3002端口会是什么样子呢?

对于跨域的详细介绍

对!他就成了这样了!他不允许你跨端口号访问!!!

但是呢,在服务端的控制台却有这样的输出:

对于跨域的详细介绍

这是什么意思呢?接下来,附上代码,一点点说明白:

ajax请求部分值修改了url部分:

对于跨域的详细介绍

也就是把端口号3001换成了3002,其余的与上面的一模一样,

服务端代码与上面的一样,只不过监听了3002端口,

对于跨域的详细介绍

通过代码可以发现,即使端口号不同,ajax中服务端仍能收到前台传过来的数据,

也就是上面控制台打印出来的数据,说明不是服务端拒绝跨站请求,而是服务端

收到数据并处理返回时,被浏览器给限制拦截了。

当然解决跨域限制的方法也有很多,现在讲这么4种:

  1.利用 JSONP 实现跨域调用

    首先,借用一段话介绍一下JSONP:

    JSONP 是 JSON 的一种使用模式,可以解决主流浏览器的跨域数据访问问题。其原理是根据 XmlHttpRequest 对象受到同源策略的影响,

而 <script> 标签元素却不受同源策略影响,可以加载跨域服务器上的脚本,网页可以从其他来源动态产生 JSON 资料。用 JSONP获取的

不是 JSON 数据,而是可以直接运行的 JavaScript 语句。

    (1)使用Jquery的$ajax来实现jsonp

       这时,ajax请求代码为:

      对于跨域的详细介绍

     服务端对应的代码为:

      对于跨域的详细介绍

      此时,浏览器的控制台会输出:

      对于跨域的详细介绍

      这时呢,请大家擦亮双眼,服务端的接受请求方式是get,而发出请求的ajax方式却为post,

      这是为什么呢?请看这个东东:

      对于跨域的详细介绍

      这个是上面的请求的http头信息,url竟然是按照get方法去传递参数的,所以服务端接受数据采用的get方法,

      究其原因还是因为jsonp原理是用<script>标签来发请求的,受限于script的格式,只能用get方法了,传输形式为:

      <script src = 'http://localhost:3001/blog?callback=jsonpCallback&name=%E5%BC%A0%E4%B8%89&id=05142075&_=1496753697939'</script>

      (2)用js原生<script>实现jsonp

        前台js代码为:

        对于跨域的详细介绍

        点击的时候创建节点并加入到head节点内,并且把src设置为地址即可,请求返回结果为:

        对于跨域的详细介绍

        (服务端代码和上面jsonp的一样);

        经过原生的script标签方法可以看出jsonp有一下几点弱势:

        1.只能用get方法发送请求

        2.同时,这种方法和ajax根本不搭边,所以不可以注册事件来监听器状态,不能很好的发现错误。

  2.CORS实现跨域调用

      再借用一段话来介绍一下CORS:

      Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,

      以避开浏览器的同源策略,是 JSONP 模式的现代版。与 JSONP 不同,CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。用

      CORS 可以让网页设计师用一般的 XMLHttpRequest,这种方式的错误处理比 JSONP 要来的好。另一方面,JSONP 可以在不支持

      CORS 的老旧浏览器上运作。现代的浏览器都支持 CORS。

      (1)CROS的实现

      ajax请求代码:

      对于跨域的详细介绍

      服务端代码:

      对于跨域的详细介绍

      请求返回结果为:

      对于跨域的详细介绍

      好的,这就完成了CORS的跨域调用,是不是很简单呢?

      这个方法是在服务端返回数据得时候加一下http头信息,最重要的是Access-Control-Allow-Origin,

      ,这个头信息表示请求时域名的值,其余的可以去学习CROS的具体细节。对于CORS,你只需要吧这些

      头消息写上去,其余的浏览器帮你完成。

      CROS的优点很明显,可以支持多方式请求,get,post,put等,它还是使用 XmlHttpRequest 进行传输

      可以注册事件来监听状态,错误处理方式好。

      当然,它也有自己的的缺点,就是对于低版本的浏览器不支持。     

以上就是对于跨域的详细介绍的详细内容,更多请关注其它相关文章!