跨域及JSONP解决跨域

跨域

什么是跨域？

• 当一个请求的url的协议, 域名, 端口三者任意一个与当前页面url不同即为跨域

• 例：

  <tr>
      <td>http://www.test.com/</td>
      <td>http://www.test.com/index.html</td>
      <td>否</td>
      <td>同源(协议, 域名, 端口一致)</td>
  </tr>
  <tr>
      <td>http://www.test.com/</td>
      <td>https://www.test.com/index.html</td>
      <td>跨域</td>
      <td>协议不同(http/https)</td>
  </tr>
  <tr>
      <td>http://www.test.com/</td>
      <td>http://www.baidu.com/</td>
      <td>跨域</td>
      <td>域名不同(test/baidu)</td>
  </tr>
  <tr>
      <td>http://www.test.com:8080/</td>
      <td>http://www.test.com:7890/</td>
      <td>跨域</td>
      <td>端口号不同(8080/7890)</td>
  </tr>
  

为什么会跨域？

• 浏览器的同源策略, 这是浏览器最基本的安全功能, 同源策略会阻止一个域js向另外一个域的内容进行交互

非同源，浏览器默认限制

• ajax请求
• 无法读取非同源页面的cookie, Localstorage
• 无法接触非同源页面的DOM

如何跨域发起ajax请求

• 前端主导的跨域解决方案 jsonp实现跨域
• 后端主导的跨域解决方案 CORS跨域资源共享

JSONP解决跨域

• jsonp是客户端与服务器跨域通信的常用方法. 最大的特点是 简单适用, 兼容性好(低版本的IE); 缺点是只能发起get请求, 无法发起post请求

• jsonp实现跨域的核心思想:

  利用html标签没有同源策略限制的特点, 通过html标签发起请求.

• jsonp实现跨域的原理:

  我们选择script标签发起网络请求, 向服务器传递数据, 服务器在收到请求之后, 将需要返回的结果放在一个指定名字的函数调用的语法里传回来, 前端拿到这个函数调用的代码之后, 在前端的js里调用同名的函数实现数据的获取.

• JSONP 实现跨域

  1. 动态创建script标签
  2. 给script标签设置src为要请求的url, 如果有参数, 直接拼接到网址的后面
  3. 注意, 需要在所有参数的最后再拼接一个参数, 这个参数需要前后台进行配合来规定
  4. 将script标签插入到当前文档中(此时才发起网络请求)
  5. 将script标签删除

  function reqCrossOrigin() {
      var scriptE = document.createElement("script");
      scriptE.src = "http://127.0.0.1/AJAX02/serve.php?name=张三&num=2020&func=success";
      document.body.appendChild(scriptE);
      document.body.removeChild(scriptE);
  }