AJAX跨域问题_ajax 在普通页面可以在admin页面不行-CSDN博客

本文链接：https://blog.csdn.net/admin_djp/article/details/110007214

本文详细介绍了跨域的概念，浏览器的同源策略以及JSONP作为跨域解决方案的工作原理。通过一个实际的手机号运势查询案例，展示了如何使用JSONP进行跨域请求，解释了JSONP如何通过回调函数实现数据的获取和展示。

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

文章目录

前言
一、什么是跨域？
- 跨域
- 同源策略
二、实现跨域的方法
- jsonp的产生
- 使用script标签实现跨域

前言

jsonp是跨域问题的一种解决方案，是一种常用的跨域手段，只支持JS脚本和JSON格式的数据本质是利用同源策略的漏洞

一、什么是跨域？

跨域

由于浏览器对javascript的同源策略的限制，例如a.cn下面的js不能调用b.cn中的js,对象或数据(因为a.cn和b.cn是不同域),所以跨域就出现了.

跨域的安全限制都是对浏览器端来说的，服务器端是不存在跨域安全限制的。
例如：

    https://www.abc.com/1.html  /   http://www.abc.com/aaa.html  协议头不一样
    https://www.abc.com/1.html  /   https://abc.com/aaa.html  域名不一样

同源策略

同源策略/SOP（Same origin policy）是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

二、实现跨域的方法

jsonp的产生

1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.
2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候
3.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里
4.而json又是一个轻量级的数据格式,还被js原生支持
5.为了便于客户端使用数据，逐渐形成了一种非正式传输协议，人们把它称作JSONP，该协议的一个要点就是允许用户传递一个callback 参数给服务端，

使用script标签实现跨域

jsonp的使用步骤 :
1. 先声明一个函数并且给函数一个形参用来接收响应体
2. 使用script标签来访问这个接口并且给他加一个参数加做callback(这个参数只能叫做callback)
3. 调用完成之后后端返回的就是函数调用的格式
例如：

<script>
            function f1(a) {
              console.log("我是请求的返回体" + a);
            }  
 </script>
 <script src="xxx.php?callback=f1"></script>

案例：输入手机号，点击测一测按钮，测试运势

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style: none;
        }
    </style>
</head>

<body>
    <input type="text" id="search">
    <input type="button" value="测一测" id="btn">

    <ul class="show">
        <!-- <li></li> -->
    </ul>

    <script>
        function f1(a) {
            var ul = document.getElementsByClassName("show")[0];
            console.log(a);
            console.log(a.result);
            var str = "";
            var data = a.result;
            for (const key in a.result) {
                if (a.result.hasOwnProperty(key)) {
                    str += `
                  <li>${a.result[key]}</li>

                  `

                }
            }
            ul.innerHTML = str;

        }
        var btn = document.getElementById("btn");
        var search = document.getElementById("search");
        btn.onclick = function() {
            var script = document.createElement("script");
            script.src = "http://api.jisuapi.com/mobileluck/query?mobile=" + search.value + "&appkey=94c543ddb1a37c93&callback=f1"
            document.body.appendChild(script);
        }
    </script>
</body>

</html>