前言

前端数据交互经常会遇到跨域请求，什么是跨域，有哪些类型的跨域方法，这就是本文的内容。

1.什么是跨域？

1.同源策略及其限制内容是什么？

同源策略是一种约定，是浏览器的核心和基本安全功能。如果没有相应的策略，浏览器很容易受到XSS、CSFR和其他攻击。同源意味着'协议域名端口'是相同的，即使两个不同的域名指向同一个ip地址，它们也不是同源的。

相应政策的限制内容有：

在向存储内容DOM节点(如Cookie、LocalStorage和IndexedDB)发送AJAX请求后，结果被浏览器截获，但有三个标签允许跨域加载资源：

img src=xxxlink href=xxxscript src=xxx2。常见的跨域场景

当协议、子域名称、主域名和端口号中的任何一个不同时，它将被视为不同的域。不同的域相互请求资源，这就是所谓的“跨域”。常见的跨域场景如下图所示：

具体说明两点：

首先，如果跨域问题是由协议和端口引起的，前台就无能为力了。

第二，在跨域问题上，只通过“URL头”来识别，而不是通过域名对应的IP地址是否相同来判断。“URL头”可以理解为“协议、域名和端口必须匹配”。

在这里，你可能会有一个问题：请求已经过了域，那么请求已经发出去了吗？

跨域并不意味着不能发送请求，但是可以发送请求，服务器可以正常接收请求并返回结果，但是结果被浏览器拦截。你可能会奇怪，为什么Ajax不能在表单可以使用的情况下进行跨域请求。说到底，跨域是为了防止用户读取另一个域名下的内容，Ajax可以得到响应，浏览器认为不安全，所以拦截响应。但是，表单不会获得新内容，因此可以发起跨域请求。这也说明跨域并不能完全阻止CSRF，因为请求毕竟是发出去的。

第二，跨域解决方案

1.jsonp

1)JSONP原理

利用脚本标签没有跨域限制的漏洞，网页可以获得从其他来源动态生成的JSON数据。JSONP请求必须得到对方服务器的支持。

2)2)JSONP和AJAX的比较

JSONP和AJAX一样，是客户端向服务器发送请求和从服务器获取数据的一种方式。但是，AJAX是同源策略，JSONP是非同源策略(跨域请求)

3)JSONP的优缺点3)JSONP的优缺点

JSONP具有简单、兼容性好的优点，可以用来解决主流浏览器的跨域数据访问问题。缺点是只有get方法有限，不安全的话可能会被XSS攻击。

4)4)JSONP的实现过程

声明一个回调函数，其函数名(如show)作为参数值，跨域传递给请求数据的服务器，函数参数就是要获取的目标数据(服务器返回的数据)。创建一个脚本标签，将跨域API数据接口地址分配给脚本的src，并将函数名传递给这个地址中的服务器(可以通过问号传递参数：回调=显示).服务器收到请求后需要特殊处理：将传递的函数名和需要给你的数据拼接成字符串，比如传递的函数名是show，准备的数据是show(‘我不爱你’)。最后服务器通过HTTP协议将准备好的数据返回给客户端，客户端调用并执行之前声明的回调函数(show)对返回的数据进行操作。在开发过程中，可能会遇到多个JSONP请求的回调函数名称相同的情况，需要自己打包一个JSONP函数。

//index.htmlfunction jsonp({ url，params，callback }){ 0返回新承诺(解析，拒绝)={让脚本=文档。create element(' script ')window[回调]=function(data){ resolve(data)document。尸体。移除子级(脚本)}参数={ 0.params，callback }//wd=bcall back=show let arrs=[]for(let key in params){ arrs。push(` $ { key }=$ { params[key]} `)}脚本。src=` $ { URL }？$ { arrs。连接(')} `文档。尸体。appendchild(script)})jsonp({ URL : ' http://localhost :3000/say '，params: { w