前言

  1. 为什么会产生跨域
  2. 解决方案

前端跨域产生

浏览器安全策略 同源策略（同协议域名端口）

解决方案

1 jsonp

json with padding 包裹后的数据是一段js代码callback(jsonResponse) 实现原理：script 标签不受同源策略影响，比如我们从CDN中加载一些js库。前端代码如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

 <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>  
</head>
<body>
  demo2
  <script>  
    var getInfo = function(data) {
      console.log('获取到的数据---', data);
    }

    var jsonp9 = function(data) {
      console.log('爱奇艺数据---', data);
    } 
  </script>
  <script src='https://photo.sina.cn/aj/index?page=1&cate=recommend&callback=getInfo' type='text/javascript'></script>
  <script src='http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=jsonp9' type='text/javascript'></script>
</body>
</html>

如果直接fetch或者xhr直接去请求接口会发生错误，所以在script 中进行处理，至于script可以进行动态添加。后端返回数据如下： image-20200511184234621

就相当于加载了一段js代码过来，然后我们上面定义了function getInfo() 返回的数据就执行了这个操作（把请求结果也带了过来）

不足：

1. 只能支持get请求
2. 这种接口需要后端配合吧，后端判断请求参数中是否有`callback` 参数，有的话就返回jsonp这种参数形式即可。

2 设置CORS

测试自己