解决跨域问题的几种办法

最新推荐文章于 2024-04-04 08:21:11 发布

&XYZ&

最新推荐文章于 2024-04-04 08:21:11 发布

阅读量508

点赞数

分类专栏：前端网络

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/104717596

版权

前端网络专栏收录该内容

3 篇文章 0 订阅

订阅专栏

解决跨域问题的几种办法

1. Flash（不讨论）
2. 服务器代理中转
3. document.domain(针对基础域名相同的情况)
4.JSONP原理

1. Flash（不讨论）

2. 服务器代理中转

（注意服务器与服务器之间不存在跨域问题）

3. document.domain(针对基础域名相同的情况)

举例子：(该例子情况可以解决跨域问题)
hz.baidu.com document.domain=‘58.com’
cs.baidu.com document.domain=‘58.com’
举例子：(该例子情况不可以解决跨域问题)
hz.tianmao.com
cs.baidu.com
现在它们的基础域名都已经不相同了，所以使用document.domain是没有效果的。

4.JSONP原理

web页面上用script标签引入js文件时不受跨域的影响。（不仅如此，我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力，比如script标签、img标签、iframe标签)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <iframe src="https://baidu.com" frameborder="0"></iframe>
    <img src="https://box.bdimg.com/static/fisp_static/common/img/searchbox/logo_news_276_88_1f9876a.png" alt="">
</body>
<script src="./index.js"></script>
<script src="./index.txt"></script>
<script src="./index.png"></script>
<script src="./index.php"></script>
<script>
    console.log(".js文件里面的d=", d)
    console.log(".txt文件里面的a=", a)
    console.log(".png文件里面的b=", b)
    console.log(".php文件里面的c=", c)
    /*
    从上面引用的文件来看，不管你引用的文件是什么格式，你都可以
    拿到文件里面的内容。还有就是：jsonp的请求都是GET请求。
    */
</script>
</html>

index.txt、index.js、index.php

整合到一个script标签里面去，注意页面阻塞消失，但是同步加载导致数据找不到，解决方法如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
</body>
<script>
    const oScript = document.createElement("script");//创建一个script的标签。
    oScript.src = "./index.txt";//给属性添加值。
    document.body.appendChild(oScript);//把标签插入到DOM文档树里面去。
    console.log(".txt文件里面的a=", a)//注意现在是找不到这个a的，因为同步加载的原因。

    /*
    现在通过回调函数，就可以拿到index.txt文件里面的内容。
    但是这样不利于与后台联调，看下面的方法B
    */
    function aa(data) {
        console.log(data)
    }

    /*
    方法B：
    oScript.src = "./index.txt？cd=bb";
    这个时候你需要和后台商量好，cd代表这回调函数，这样就可以完美的解决回调函数命名的问题。
    */
    const oScriptB = document.createElement("script");//创建一个script的标签。
    oScriptB.src = "./index.txt?cd=bb";//给属性添加值。
    document.body.appendChild(oScript);//把标签插入到DOM文档树里面去。
    function bb(data) {
        console.log(data)
    }

</script>

</html>

在这里插入图片描述

我们把数据放到服务器上，并且数据为json形式（因为js可以轻松处理json数据）
我们无法监控通过script标签的src属性是否把数据获取完成，所以我们需要做一个处理。
实现定义好处理跨域获取数据的函数，如function aa(data) {}、function bb (data) {}、function doJson (data) {}。
用src获取数据的时候添加一个参数cb=“doJson”（服务器端会根据参数cd的值返回对应的内容），此内容为以cd对应的值doJson为函数真实要传递的数据为函数的参数的一串字符，如dojson（‘数据’）。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>温故而知“心”</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
</body>
<script>
    const oScript = document.createElement("script");//创建一个script的标签。
    oScript.src = "./index.txt?cd=aa";//给属性添加值。
    document.body.appendChild(oScript);//把标签插入到DOM文档树里面去

   

    const oScriptB = document.createElement("script");//创建一个script的标签。
    oScriptB.src = "./index.txt?cd=bb";//给属性添加值。
    document.body.appendChild(oScript);//把标签插入到DOM文档树里面去。

    function aa(data) {
        console.log(data)
    }

    function bb(data) {
        console.log(data)
    }

</script>

</html>

在这里插入图片描述

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
解决跨域问题的几种办法

解决跨域问题的几种办法1. Flash（不讨论）2. 服务器代理中转3. document.domain(针对基础域名相同的情况)1. Flash（不讨论）2. 服务器代理中转（注意服务器与服务器之间不存在跨域问题）3. document.domain(针对基础域名相同的情况)举例子：(该例子情况可以解决跨域问题) hz.baidu.com document.domain=‘58.c...
复制链接

扫一扫

专栏目录