面试语述：跨域及跨域解决方案

跨域

跨越 区域(范围)

浏览器为保证数据安全 设立了一种安全策略 —— 同源策略

同源策略的核心思想是 一个页面无法访问跨源(域)的数据
1.Cookie 、LocalStorage 和 IndexDB 无法读取
2.Dom 和 JS 对象无法获取
3.Ajax请求发送不出去

同源：有三个条件需要同时满足 才叫同源

1. 相同的协议 ( http:// https:// )
2. 相同地址(ip / 域名)
3. 相同端口

跨源(跨域)解决方案

1. JSONP

//原生的实现方式
let script = document.createElement('script');
script.src = 'http://www.xxxx.com'
document.body.appendChild('script')
function callback(res) {
   console.log(res)
}

2. 跨域资源共享(CORS) 是一个W3C标准，全称（Cross-origin resource sharing）,她是允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

1、请求方式为HEAD、POST 或者GET
2、http头信息不超出以下字段：Accept、

3. 反向代理 使用代理 使用web服务器代理请求地址

devServer:{
  proxy:{
  "/api" : {
      target:'http://192.168.50.127:8082',
      changeOrigin:true,
      pathRewrite:{
         ['^' + '/api'] : ''
      }
    }
  }
}

JSONP和JSON 没有关系
JSONP是一种社区跨域解决方案(不属于语言标准)
JSONP不属于任何标准 依赖某些可以跨域的属性实现功能

JSONP实现跨域的核心思路是：

动态的创建script元素 将需要请求的路径写在src属性中
利用src属性不受同源策略限制的特点发送get请求
请求的结果会被浏览器识别是js代码 执行得到结果

src属性不受同源策略的限制：可以使用带有src属性的元素来发送请求 请求的类型get

例如：
<img src="">
<iframe src="">
<script src=""></script>