跨域知识点总结

小徐今天学习了吗
160 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第12天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章ajax知识点总结（四）中，我们学习了axios发送网络请求、同源与跨域等相关知识点。今天，在这篇文章中，我们跨域解决方案等相关知识点。

跨域

同源指的是两个 URL 的协议、域名、端口一致，反之，则是跨域。出现跨域的根本原因是浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。

那么该如何解决跨域问题呢？

现如今，实现跨域数据请求，最主要的两种解决方案，分别是 JSONP 和 CORS。

JSONP

JSONP(JSON with Padding)可用于解决主流浏览器的跨域数据访问的问题。它的原理是服务端返回一个预先定义好的 javascript 函数的调用，并且将服务器的数据以该函数参数的形式传递过来，这个方法需要前后端配合。

jsonp是带补丁的 json, 服务器不直接返回 json , 而是把 json 数据放到函数中作为实参传递。

script  标签是不受同源策略的限制的，它可以载入任意地方的 JavaScript 文件，而并不要求同源。类似的还有img和link标签。

<!--不受同源策略的标签-->
<img src="http://www.api.com/1.jpg" alt="" />
<link rel="stylesheet" href="http://www.api.com/1.css" />
<script src="http://www.api.com/1.js"></script>

总结一下，jsonp 的原理就是 借助了 script 标签不受同源策略的限制，在服务端返回一个函数的调用，将数据作为当前调用函数的实参。 在浏览器端，需要程序要声明一个函数，通过形参就可以获取到服务端返回的对应的值。

CORS

新版本的 XMLHttpRequest 对象，可以向不同域名的服务器发出 HTTP 请求。这叫做跨域资源共享（Cross-origin resource sharing，简称 CORS）。

跨域资源共享（CORS）的前提是（1）浏览器支持这个功能；（2）服务器必须允许这种跨域。

服务器允许跨域的代码：

// 允许所有的域名访问这个接口
ctx.set('Access-Control-Allow-Origin', '*');

// 允许http://www.study.com这个域名访问这个接口
ctx.set('Access-Control-Allow-Origin', 'http://www.study.com');

具体流程

  1. 浏览器会向发送一条请求，服务器接受到请求之后，会返回请求头信息，浏览器查看返回的响应头信息中是否设置了header('Access-Control-Allow-Origin:请求源域名或者*');
  2. 如果没有设置，说明服务器不允许使用 cors 跨域，那么浏览器会把获取到的数据拦截。
  3. 如果返回的响应头中设置了header('Access-Control-Allow-Origin:请求源域名或者*');,浏览器会跟请求头中的Origin: http://www.study.com进行对比，如果满足要求，就把数据发送给用户。

需要注意的是，跨域行为是浏览器行为，是浏览器阻止了 ajax 行为。服务器与服务器之间是不存在跨域的问题的。浏览器允许发起跨域请求，但是，跨域请求回来的数据，会被浏览器拦截，无法被页面获取到。

JSONP和CORS对比

jsonp：

  • 兼容性好，老版本浏览器也支持
  • 缺点是只支持 GET 请求，不支持 POST 请求。
  • 发送的数据量有限。使用麻烦

CORS：

  • 出现的较晚，它是 W3C 标准，属于跨域 Ajax 请求的根本解决方案。
  • 支持 GET 和 POST 请求。
  • 缺点是不兼容某些低版本的浏览器。(浏览器支持 cors 功能才行)
  • 但是使用简单，只要服务端设置允许跨域，对于客户端来说，跟普通的 get、post 请求并没有什么区别。

跨域的安全性问题：很多人会觉得跨域能带来安全性问题，其实并不会，因为跨域是需要服务端配合的 ，也就是说不论 jsonp 还是 cors，如果没有服务端的允许，浏览器是没法做到跨域的。

avatar
文章
阅读
粉丝