跨域

跨域

• 跨域：浏览器对于js有一个同源策略的限制，违反了这个同源策略，就会跨域
• 造成跨域：

​ 域名不同：http://www.taobao.com http://www.jd.com

​ 端口不同：http://www.tencet.com:3000 http://www.tencet.com:5000

​ 协议不同：http://www.baidu.com https://www.baidu.com

Access to XMLHttpRequest at 'https://prom.mobile.gome.com.cn/wap/promotion/promscms/pchomeRA5OQWzpCIs.jsp?callback=dynamicActiveTemplets&_=1610526257851' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

• 解决跨域：jsonp

  • 解决思路：src属性不受同源策略的限制
  • 解决办法：script标签的src属性，发起数据请求(回调函数)，后台接收请求，通过调用回调函数，将数据返回
  • 这种不标准的数据交互方式，叫jsonp

  $("button").click(function(){
      //jsonp：通过script标签的src属性,传入一个函数，后台调用并传参
      $("head").append("<script src='https://www.baidu.com/sugrec?ie=utf-8&prod=pc&wd=%E5%B0%8F%E8%8A%B3&cb=show'><\/script>")
  });
  function show(res){
      console.log(res);
  }
  

• jquery的jsonp

   $.ajax({
       "url":"https://www.baidu.com/sugrec",
       "type":"get",
       "data":{"ie":"utf-8","prod":"pc","wd":"河南张氏"},
       "dataType":"jsonp",
       "success":function(res){
           console.log(res);
       }
   })
  

注意：jsonp只支持get请求,cors:跨域资源共享