同源-跨域-jsonp

同源策略：在浏览器中,

如果网页是非同源的，ajax请求是不让发的,ajax请求到百度的搜索数据 会报错 （非同源，受到了浏览器里面的同源策略的限制）

同源与否，关键看三个是否一致（协议、域名、端口），只要有一个不同，就是非同源的。

 跨域解决同源策略:

方式: 1. jsonp 经典   缺点：不支持POST请求

方式2: 2. cors  简单   缺点：有兼容问题

jsonp的原理

jsonp : json with padding  参数式json

 ajax请求会收到浏览器的同源策略的限制，不用ajax发送请求获取数据,jsonp 和 ajax是没有任何关系

 ajax 通过 XMLHttpRequest,

 jsonp 通过script标签发请求，因为浏览器的同源策略不对script标签对限制,link img 标签 也不受同源策略的限制,因为使用script标签发请求，获取的内容会当成js来执行解析。

  jsonp 参数式json，把json数据作为函数的实参传递给前端

  前后端分别做了啥

  前端

        1. 通过script发请求

        2. 定义一个fn的函数，通过fn函数的形参可以获取到服务器响应的json数据

  后端

        响应的内容不是直接给json数据，把json数据作为函数的实参传递给前端 fn(json数据)

  jQuery发送jsonp请求: 和 $.ajax语法是一样的， 还需额外的配置 dataType: "jsonp",jsonp 和 ajax没有关系，只是在jQ里面，语法是一样的。

 $.ajax({

        // type: "POST", // 写POST没用

        url: "http://111.229.6.231:9996/v1/jsonp2",

        dataType: "jsonp",

        success: function (res) {

          console.log(res);

        }

      })

jsonp的缺点，只支持GET请求方式;

CORS 是后端帮忙解决问题，前端还是正常的发送ajax请求, ajax请求 是ok的，服务器的响应头有 Access-Control-Allow-Origin: * 接口可以共享给任何人访问到,失败了 服务器的响应头没有 Access-Control-Allow-Origin 响应头信息;

cors

         后端做处理，cors后端添加响应头信息  Access-Control-Allow-Origin