常用跨域处理（前端基础系列）

最新推荐文章于 2025-11-01 19:26:49 发布

转载最新推荐文章于 2025-11-01 19:26:49 发布 · 63 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ukerxi/p/8023704.html

本文介绍了单向跨域和双向跨域的技术实现方案，包括JSONP、img标签请求、window.name数据访问、CORS、serverproxy、document.domain设置及window.postMessage等方法。

一、单向跨域

1.JSONP（JSON with padding）,主要使用<script> 标签的跨域能力执行请求，例如：在wwww.a.com页面上，请求www.b.com的数据资源，实现代目如下

<!-- www.a.com 页面请求 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>JSONP</title>
</head>
<body>
    <script type="text/javascript">
        // 声明回调具体的处理函数
        function handleCallback(data){
            console.log(data);
        }
    </script>
    <!-- 发起JSONP 请求,并携带回调处理函数的名字，以便服务器返回处理，  
    返回文件中是一段可执行的javascript脚本，如：handleCallback(['data1', 'data2']) -->
    <script type="text/javascript" src="www.b.com/sever?jsonp=handleCallback"></script>
</body>
</html>

2.img标签请求，主要用于统计数据

<!-- www.a.com 页面请求 -->
<img src="www.b.com/serve" />

3.使用 window.name 进行数据的访问，由于 window.name 属性不会因为location的变化而变化，所以可以使用这个特性进行数据的传递，例如：在www.a.com页面中，使用iframe，先设置iframe的src为 www.b.com下的页面，等待加载完成，拿取需要的数据，并把数据赋值给 window.name 属性中，这时将src属性再替换为 www.a.com下的页面，这时获取 window.name 的数据，即可实现跨域请求

4.CORS(access control) 跨域资源共享，浏览器新特性，主要处理请求头部（origin）及响应头部的（Access-control-allow-origin）的允许域名及端口

5.server proxy(代理)，全部请求都请求向一个域名，然后服务器处理这些请求时，进行自动代理到，另外的服务器，（同源策略只是针对浏览器）

二、双向跨域
1.设置document.domain：主要用于，主域与子域，子域与子域之间的通信

2.使用 window.postMessage（新特性）进行通信，可以配合iframe使用，监听window.onMessage 事件，即可进行通信

【结束语】

系列文章，包括了原创，翻译，转载等各类型的文章；一方面是为了自己总结，另一方面页希望可以共享知识；在技术方面有输入，也要有所输出，才能更进一步！文章基于自己的实践、阅读及理解，如有不合理及错误的地方，烦请各大佬评论指出，以便改正，感谢！

转载于:https://www.cnblogs.com/ukerxi/p/8023704.html