跨域（JSONP之script的src get请求、cors、服务器代理）

最新推荐文章于 2024-02-25 00:00:00 发布

咩有猫腻.

最新推荐文章于 2024-02-25 00:00:00 发布

阅读量573

点赞数

分类专栏：前端后端

本文链接：https://blog.csdn.net/DcTbnk/article/details/106556727

版权

前端后端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

test测试

<body>
    <script src="../ajax.js"></script>
    <script>
      ajax("http://localhost/course24/crossDomain/test.php")
        .then((data) => {
          console.log(data);
        })
        .catch(() => {});
      //两个不同的服务器 127.0.0.1：5500  localhost 一个服务器上的文件请求另外一个服务器上的资源时，形成了跨域
      //在什么情况下，会形成跨域 协议不同，域名不同，端口号不同，导致无法正常的访问资源
      //浏览器本身的安全机制：同源策略（协议，域名，端口都一致）
    </script>
  </body>

一.JSONP

<script>
      //JSONP get请求
      //利用script标签的src属性没有同源策略限制这一特点，访问非同源数据
      let oScript = document.createElement("script");
      oScript.src = "http://localhost/course24/crossDomain/test.php?cb=a";
      document.body.appendChild(oScript);

      // 将data包裹起来
      function aa(data) {
        console.log(data);
      }
    </script>

二.cors

在这里插入图片描述

一.服务器代理

在这里插入图片描述
case01

<body>
    <script>
      let oScript = document.createElement("script");
      oScript.src =
        "http://api.k780.com:88/?app=weather.future&weaid=zhengzhou&&appkey=10003&sign=b59bc3ef6191eb9f747dd4e83c99f2a4&format=json&jsoncallback=abc";
      document.body.appendChild(oScript);
      function abc(data) {
        console.log(data.result[0].temp_high);
      }
    </script>
  </body>

case02
在这里插入图片描述

<body>
    <input type="text" />
    <ul></ul>
    <script>
      //https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&wd=%E5%88%98%E6%9E%AB&cb=aa

      let oInput = document.querySelector("input");
      let oUl = document.querySelector("ul");
      oInput.oninput = function () {
        let oScript = document.createElement("script");
        oScript.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&wd=${oInput.value}&cb=aa`;
        document.body.appendChild(oScript);
        document.body.removeChild(oScript);
      };

      function aa(data) {
        console.log(data);
        let res = data.g;
        if (!data.g) {
          oUl.innerHTML = "";
          return;
        }
        let str = "";
        res.forEach((item) => {
          str += `<li><a href="https://www.baidu.com/s?wd=${item.q}">${item.q}</a></li>`;
        });
        oUl.innerHTML = str;
      }
    </script>
  </body>