这是我参与2022首次更文挑战的第18天，活动详情查看：2022首次更文挑战
一、跨域的概念
- 浏览器有同源策略，不允许ajax访问其他域接口
- 当客户端从一个站点A获取一个页面，然后再在这个页面去访问另一个站点B的资源时，就会产生跨域。当在前端中使用XMLHttpRequest对象向服务器发送请求时，就会有跨域的限制，客户端能成功将请求发送到服务端，但接受不到服务端传回来的数据，这个跨域的限制时浏览器为了安全性而限制的。
下面三者有一个不同就会产出跨域：
- 协议
- 域名
- 端口
（一）可以跨域的三个标签
-
<img src=xxx><img>用于打点统计，统计网站可能是其他域 -
<link href=xxx><link>和<script>可以使用CDN，CDN的也是其他域 -
<script src=xxx><script>可以用于JSONP
（二）跨域请求注意事项
- 所有的跨域请求都必须经过信息提供方允许
- 如果未经允许即可获取，那是浏览器同源策略出现漏洞
二、跨域解决方案
方案一：jsonp
jsonp原理
当在浏览器端使用script标签发送请求时，不会有跨域的限制，jsonp就是利用这个特点来解决跨域问题。它利用script标签发送请求，在客户端定义一个回调函数，发送请求时，将回调函数的名称传输给服务器，然后服务器给客户端返回传过去的回调函数的调用，服务器要传送到客户端的数据就包在回调函数里，这样就获取到了数据，最后在回调函数里面对数据进行相关的处理，再展示到页面。
jsonp解决跨域问题案例
以360搜索为例，360搜索这个页面的站点为：www.so.com/ ，当用户在搜索框输入搜索词时，浏览器会回去另一个站点（sug.so.360.cn/suggest） 获取用户搜索词相关的词的数据，这两次数据的获取访问的时不同的站点，所以就会有跨域问题，而360搜索这里就利用了jsonp解决的跨域问题。它的回调函数，和传输数据如下图：
jsonp特点
jsonps是早期的跨域解决方案，兼容性比较好。但是因为jsonp时利用script标签发送请求，所以它只能用来解决以get方式发送请求产出的跨域问题，而且它需要在客户端和服务器端都做相应的处理。因此，当需要传递很多的数据时，jsonp这种解决跨域问题的方式就不太可取。
方案二：cors 跨域
cors原理
cors的原理就是在发送请求给服务器的时候，服务器给客户端一个响应头，告诉客户端（浏览器），这些数据可以访问，从而实现了跨域资源共享。
cors解决跨域问题案例
响应头后面的http://127.0.0.1 表示用户从当前页面去向另一个站点请求数据的站点，对应上文提到的A站点，如果这个值为*，表示所有的站点都可以获取到这些数据，也就相当于不存在跨域问题了。一般是不可能会这样做的，特别是对于一些涉密数据、隐私数据，这样做是极其不安全的。
cors特点
cors是后期的跨域解决方案，因为Access-Control-Allow-Origin响应头是后期http协议规定的，如果浏览器不支持这个响应头就用不了cors,所以它的兼容性差一些。但cors只需要配置服务器，而且get和post方式的请求。
其他方案
后台服务器转发
因为服务器之间没有跨域限制的，所以当浏览器需要在站点A向站点B获取数据时，可以先让浏览器向站点A发送请求，然后让站点A的服务器向站点B发送http请求，响应返回相关数据，然后再由站点A响应相关数据到浏览器，这样也解决的跨域限制。
