js高级--jsonp跨域

最新推荐文章于 2024-09-12 13:23:45 发布

向全栈冲

最新推荐文章于 2024-09-12 13:23:45 发布

阅读量683

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47917392/article/details/118705166

前端开发专栏收录该内容

42 篇文章

订阅专栏

本文介绍了JavaScript的同源策略限制，以及如何通过JSONP技术来解决跨域问题。详细讲解了JSONP的工作原理，包括利用script标签的src属性进行跨域请求，服务器端返回数据的处理方式，以及客户端如何定义并调用回调函数来处理返回的数据。同时，文章还提到了CORS作为另一种服务器端跨域的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一．ajax的同源策略

Ajax请求限制：

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

XMLHttpRequest

fetch() 封装了ajax

同源策略：

什么叫做同源

如果两个页面拥有相同的协议、域名和端口，那么这两个页面就属于同一个源，其中只要有一个不相同，就是不同源。
http://www.example.com/dir/page.html
http://www.example.com/dir2/other.html：同源
http://example.com/dir/other.html：不同源（域名不同）
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
https://www.example.com/dir/page.html：不同源（协议不同）

什么叫同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源

同源策略的目的

同源策略是为了保证用户信息的安全，防止恶意的网站窃取数据。最初的同源政策是指 A 网站在客户端设置的 Cookie，B网站是不能访问的。

随着互联网的发展，同源政策也越来越严格，在不同源的情况下，其中有一项规定就是无法向非同源地址发送Ajax 请求，如果请求，浏览器就会报错。

二．jsonp跨域

使用JSONP解决同源限制问题

jsonp的原理：页面上的很多标签比如src，href，都不会受到同源策略的影响

有一些标签天生就有跨域能力，比如：img，link，iframe，script

jsonp就是利用<script>的src来实现跨域获取数据的，只支持get请求

jsonp 由两部分组成：回调函数和数据，回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据

jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。

将不同源的服务器端请求地址写在 script 标签的 src 属性中
```
 <script src="www.example.com"></script>
```
服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
```
 const data = 'fn({name: "张三", age: "20"})';
 echo data;
```
在客户端全局作用域
```
function fn(data){}
```
在fn函数内部对服务器端返回的数据进行处理
```
function fn(data){
    console.log(data);
}
```

整体实现思路：

客户端需要将函数名称传递到服务器端
将script请求的发送变成动态的请求。

 <script>
  function fn(data){
     console.log(data);
 }
//  接收后端响应的数据
</script>

<script src="data.php?callback=fn"></script>

后端：

<?php
    $cb = $_GET['callback']; //接收前端的参数：callback  fn
    $data = "i am back";

    echo $cb.'("'.$data.'")'; // fn('123')
?>
    
    echo '字符串'

高级版实现：

 <script>
        function fn1(data) {
            console.log('客户端的fn函数被调用了');
            console.log(data);
        }
        function add(){
            // 创建srcipt标签
            var oSrc = document.createElement('script');
            oSrc.src = 'http://192.168.52.1/workspace/demo/code3/data.php?callback=fn1';
            document.body.appendChild(oSrc);
            // 监听script标签什么时间加载完成，
            oSrc.onload = function(){
                oSrc.remove();
            }
        }
    </script>

高级封装

1. 客户端需要将函数名称传递到服务器端
2. 将script请求的发送变成动态请求
3. 封装jsonp函数，方便请求发送

<script>
      function add() {
          jsonp({
              url: 'http://192.168.52.1/workspace/data.php',
              data:{},
              success:function(data){
                  console.log(data);
              }
          })
      }

      function jsonp(options) {
          var script = document.createElement('script');
          var fn = 'myscript'+Math.random().toString().replace('.','');
          //生成随机函数名
          window[fn]=options.success;
          script.src = options.url+'?callback='+fn+getParams(options.data);
          document.body.appendChild(script);
          // 监听script标签什么时间加载完成，
          script.onload = function () {
              script.remove();
          }
      }
      function getParams(obj){
          var arr = [];
          for(var k in obj){
                arr.push(k+'='+obj[k]);
          }
          return arr;
      }
  </script>

三．服务器端跨域

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

前端请求地址：

http://192.168.52.1/workspace/day05/cros.php

后端设置：

 Access-Control-Allow-Origin: 'http://localhost:3000'
 Access-Control-Allow-Origin: '*'

header(‘Access-Control-Allow-Origin: *’);
如果想设置只允许某个网站通过的话可以这样设置
header(’Access-Control-Allow-Origin: http://test.com‘); // 允许test.com发起的跨域请求,其他的都不通过

六. 请求天气预报

接口文档：

      请求方式：GET     
      请求地址: 'https://wis.qq.com/weather/common',
     必要参数：
         province: "陕西省",
         city: "西安市",
         source:'pc',
         weather_type:'forecast_1h'

搜索框自动搜索

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>

<body>
    <input type="text">
    <script src="./jsonp.js"></script>
    <script>
        
        var oTxt = document.querySelector('input')
        oTxt.oninput = function () {
            jsonp({
                type:'GET',
                url: 'https://suggest.taobao.com/sug',
                data: {
                    q: this.value,
                },
                success: function (data) {
                    console.log(data);
                }
            })
        }
    </script>
</body>

</html>