理解同源策略与跨域：JSONP和CORS实践-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45346719/article/details/117350465

同源与跨域

1.同源
协议、域名、端口号都一样（默认端口号为80）

2.跨域
协议、域名、端口号中存在一项或多项不一样

同源策略：浏览器的安全机制，网站A、网站B之间不同源，不允许进行资源交换
拦截时间：资源返回时被浏览器拦截
在这里插入图片描述
跨域数据请求：JSONP和CORS
JSONP：不是W3C标准，但兼容性好（兼容低版本IE），只支持GET请求，不支持POST请求
CROS:W3C标准，兼容性不好，不兼容低版本浏览器，支持GET请求和POST请求

JSONP原理：利用<script>标签不受同源策略的影响，通过src属性，来请求分同源的js脚本，请求跨域的数据接口，通过函数调用的形势来接受跨域接口调用回来的数据

实现一个简单JSONP跨域数据请求：

<body>
  //函数定义
  <script>
    function abc(data) {
      console.log('拿到了Data数据：')
      console.log(data)
    }
  </script>
  //函数调用
  //?callback=abc通过查询字符串的形势来调用abc函数
  <script src="./js/getdata.js?callback=abc"></script>
</body>

./js/getdata.js文件中代码
abc({name:'王';age:24;})

  <body>
    <script>
      function abc(data) {
        console.log('JSONP响应回来的数据是：')
        console.log(data)
      }
    </script>
    //?callback=abc通过查询字符串的形势来调用abc函数
    //&name=ls&age=30参数
    <script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=abc&name=ls&age=30"></script>
  </body>

待更新…

jQuery中JSONP的实现过程
jQuery中的JSONP，也是通过<script>标签的src属性来实现跨域数据访问的，只不过是通过动态创建和移除<script>标签的方式来发起JSONP数据请求。
在发起JSONP请求的时候，当态向<header>中append<script>标签
在JSONP请求成功后，动态从<header>中移除刚才append进去的<script>标签
例子：

<body>
  <button id="btnJSONP">发起JSONP数据请求</button>

  <script>
    $(function () {
      $('#btnJSONP').on('click', function () {
       // 发起JSONP的请求
        $.ajax({
          url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?address=北京&location=顺义',
          // 代表我们要发起JSONP的数据请求，必须要
          dataType: 'jsonp',
          //自定义参数名称
          jsonp: 'callback',
          //自定义回调函数名称
          jsonpCallback: 'abc',
          success: function (res) {
            console.log(res)
          }
        })
      })
    })
  </script>
</body>