跨域

Posted 2021-09-06 立志成为前端工程师

一   什么是跨域？

　　浏览器同源策略定义：为了数据安全性；Netscape提出来限制浏览器访问跨域数据的策略；

　　浏览器同源：同源指的是协议、主机名、端口三者都相同的URL地址就是同源的；而三者只要有一个不一样；就表示不同源;

二  跨域

　　(1) 资源跳转：A链接、重定向、表单提交
　　(2) 资源嵌入：<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链
　　(3) 脚本请求：js发起的ajax请求、dom和js对象的跨域操作等

三  对于浏览器来说，哪些资源（操作）会受到同源策略的限制？

　　对于浏览器来说，除了DOM，Cookie，XMLHttpRequest会受到同源策略的限制外，浏览器加载的一些第三方插件也有各自的同源策略。
　　最常见的一些插件如Flash，Java Applet，Silverlight，Google Gears等都有自己的控制策略。
　　另外，存储在浏览器中的数据，如LocalStorage和IndexedDB，以源进行分割。每个源都拥有自己单独的存储空间，一个源中的javascript脚本不能对属于其它源的数据进行读写操作。

四  解决跨域

　　随着互联网的发展，对用户体验的要求越来越高，AJAX应用也就越发频繁，AJAX的本质就是XMLHttpRequest。
　　但XMLHttpRequest受到同源策略的约束，所以不能跨域访问资源，这与我们的期望是相违背的。　

　　1   JSONP(前端编写；但需要后端支持)

　　在浏览器中，<script>，<img>，<iframe>，<link>等标签都可以跨域加载资源，而不受同源策略的限制。

　　JSONP就是利用这个特性，通过javascript标签加载资源的方式请求跨域接口数据，间接绕开了浏览器同源策略的限制。

　　JSONP允许在服务器端返回javascript标签到浏览器，在浏览器端通过调用javascript函数的形式实现访问跨域资源或数据。

　　具体来说，就是在DOM中通过动态创建javascript标签，并给标签设置src属性，在访问请求参数中传递需要回调的函数名；
　　同时，服务端在响应jsonp请求时，将数据作为请求参数指定的客户端回调函数参数作为返回值，这样对于客户端来说服务器的响应数据其实是回调函数的参数，是javascipt对　　　　象，而不是字符串，因此避免了使用JSON.parse的步骤。

　　缺点：只能解决get跨域；

　　2   CORS (解决跨域的根本方法)  后端编写

　　CORS（跨域资源共享）是解决浏览器跨域限制的W3C标准;

　　根据CORS标准的定义，在浏览器中访问跨域资源时，需要做如下实现:

• 服务端在响应消息头中包含消息头：Access-Control-Allow-Origin，值为服务端允许访问资源的域名称，同时浏览器会根据该值与发起的请求消息头Origin值进行匹配，以确认服务端是否允许访问跨域资源。
• 浏览器在发送非“简单方法”（GET，HEAD请求被定义为简单方法）之前，会发送一个预检请求（通常是一个OPTIONS请求），浏览器根据响应消息头验证服务端是否允许访问跨域资源，从而决定是否需要发送“实际请求”。
• 在服务端根据请求消息头Origin值以决定是否允许浏览器访问跨域资源，返回相应的消息头。

　　

　　具体来说，在实现时通常需要设置如下几个响应消息头：

1. Access-Control-Allow-Origin：“origin-list” | “null” | “*”，允许访问跨域资源的域名列表，对于预检请求来说，决定是否会发送实际请求。
2. Access-Control-Allow-Credentials：true | false，表明实际请求中是否可以包含用户凭证信息。
3. Access-Control-Allow-Methods：“method”，服务端允许访问的实际请求方法名列表。
4. Access-Control-Allow-Headers：“field-name”，在“实际”请求中可以包含的消息头名称列表。
5. Access-Control-Max-Age：seconds，预检请求结果缓存时间，单位：秒。在该时间范围内，发送实际请求之前不再会发送预检请求。

　　特别说明：对于需要跨域传递Cookie的场景，必须设置消息头“Access-Control-Allow-Credentials”为“true”，且此时“Access-Control-Allow-Origin”值只能为某一指定单一域名。
　　简而言之，CORS标准的核心就是：服务端需要在浏览器的跨域请求响应中包含指定消息头，

　　3   WebSocket

　　WebSocket是在html5中引入的浏览器与服务端的通信协议，可以类比HTTP。

　　WebSocket是一种通信协议，使用ws://（非加密）和wss://（加密）作为协议前缀。
　　该协议不实行同源政策，只要服务器支持，就可以通过它进行跨源通信。