JavaScript 跨域问题简述

最新推荐文章于 2022-10-18 16:43:05 发布

Acmera

最新推荐文章于 2022-10-18 16:43:05 发布

阅读量801

点赞数

分类专栏： JavaScript 文章标签： javascript 跨域 jsonp

本文链接：https://blog.csdn.net/chenjiaxiang520/article/details/53676131

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文简要介绍了JavaScript的跨域概念，包括定义和Ajax跨域限制。讲解了JSONP作为解决跨域问题的一种方式，阐述了JSONP的工作原理，并提供了一个简单的封装跨域函数的示例。

摘要由CSDN通过智能技术生成

JavaScript 跨域问题简述

一、什么是跨域？

1.文件所在的服务器的域名，端口号，协议其中之一不同于当前页面，页面访问该服务器文件的过
程就称为跨域。

2.Ajax由于安全性问题没法跨域访问文件。

3.实现跨域可以通过src链接到需要访问接口,比如访问不同域的js、css文件或者图片，通过对应的script、link、img标签的src属性来实现。

二、使用

<script type="text/javascript" src="./cross.js"></script>

2.跨域访问获取jsonp数据：

A.jsonp：服务器向前端返回callback(data)形式的js字符串数据，callback是前端的一个函数，
data是JSON规范的字符串;

B.jsonp解决跨域问题结合以下代码：

a.通过script标签src属性访问到不同域服务器里面的动态页面，比如cross.php文件，

b.服务器的php运行环境会解析该php文件然后将得到的callback(data)字符串数据返回前端，

c.然后前端会执行callback(data)函数，所以我们只需要定义一个全局callback(data)
函数便可以解析data数据，；

scross.php

<?php 

$callback = $_GET['jsonp'];
$array = array('name'=>'张三','age'=>18);

echo $callback."(".json_encode($array).")";

?>

cross.html

/* 为什么callback必须是全局函数？
   1.全局函数意味着callbak函数只能被script直接包裹，
    a.如果使用自己执行函数(function(){})()包裹,会使得callback成为局部变量
    b.使用window.onload = function(){} 包裹也一样成为局部变量
    c.jsonp实现跨域src所在的script是直接追加到页面并且执行，这时候需要调用callback函数
    如果callback是局部函数，那么将会报错
*/
<script>
    function callback(data) {
        console.log(data);
    }

    window.onload = function() {

        var script = document.createElement('script');
        script.src = '../testphp/cross.php?jsonp=callback';
        document.body.appendChild(script);

    }
</script>

3.封装跨域函数:

function crossRegion(jsonp,callback,url){
    /*默认callback的key为‘jsonp’*/
    var jsonp = jsonp || 'jsonp';
    var script = document.createElement('script');
    script.src = url + '?' + jsonp + '='+ callback;
    document.body.appendChild(script);
}