跨域以及解决办法

同源&＃xff1a;符合“协议&＃43;域名&＃43;端口”三者相同&＃xff0c;就是同源。

同源策略&＃xff1a;同源策略&＃xff0c;初衷是为了浏览器的安全性&＃xff0c;保证浏览器不易受到XSS、CSFR等攻击。

同源策略限制的内容有&＃xff1a;

• COOKIE、LocalStorage和IndexedDB等存储性内容
• DOM和JS对象
• AJAX请求发送后&＃xff0c;被浏览器拦截

但是有三个标签是允许跨域加载资源&＃xff1a;

• 服务器端&＃xff1a;

      $cb &＃61; $_GET[&＃39;callback&＃39;];

      $data &＃61; array(

                  &＃39;name&＃39;&＃61;> &＃39;zs&＃39;,

                  &＃39;age&＃39;&＃61;>18,

                  &＃39;gender&＃39;&＃61;>true

              );

      echo $cb.&＃39;(&＃39;.json_encode($data).&＃39;)&＃39;;

  ?>

   

  JSONP封装&＃xff1a;

  function jsonp({ url, params, callback }) {

    return new Promise((resolve, reject) &＃61;{

      let script &＃61; document.createElement(&＃39;script&＃39;)

      window[callback] &＃61; function(data) {

        resolve(data)

        document.body.removeChild(script)

      }

      params &＃61; { ...params, callback } // wd&＃61;b&callback&＃61;show

      let arrs &＃61; []

      for (let key in params) {

        arrs.push(&＃96;${key}&＃61;${params[key]}&＃96;)

      }

      script.src &＃61; &＃96;${url}?${arrs.join(&＃39;&&＃39;)}&＃96;

      document.body.appendChild(script)

    })

  }

  jsonp({

    url: &＃39;http://localhost:3000/say&＃39;,

    params: { wd: &＃39;Iloveyou&＃39; },

    callback: &＃39;show&＃39;

  }).then(data &＃61;{

    console.log(data)

  })