跨域解决办法

最新推荐文章于 2021-06-29 22:05:18 发布

gutonghuai

最新推荐文章于 2021-06-29 22:05:18 发布

阅读量2.4k

点赞数

分类专栏： JS 文章标签： jsonp javascript callback function xmlhttprequest jquery

本文链接：https://blog.csdn.net/gutonghuai/article/details/6117348

版权

JS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1：最简单的办法
腾讯这么做了：
document.domain='qq.com';

解决跨域问题，最简单的方法。
局限性：只能解决跨二级域。及其他。

2:jquery的jsonp

预备知识：

1. 什么是 JSONP ： JSONP （ JSON with Padding ）是一个非官方的协议，它允许在服务器端集成 Script tags 返回至客户端，通过 javascript callback 的形式实现跨域访问（这仅仅是 JSONP 简单的实现形式）。

2. 为什么使用 JSONP ：由于 JSON 只是一种含有简单括号结构的纯文本，因此许多通道都可以交换 JSON 消息。因为同源策略的限制，我们不能在与外部服务器进行通信的时候使用 XMLHttpRequest 。而 JSONP 是一种可以绕过同源策略的方法，即通过使用 JSON 与 < script> 标记相结合的方法，从服务端直接返回可执行的 JavaScript 函数调用或者 JavaScript 对象。

JSONP 如何使用：

jQuery 从 1.2 以后，可以使用 ajax 进行跨域请求，其实时就是使用了 JSONP+ 动态插入代码。 jQuery 会在 window 对象中加载一个全局的函数，当代码插入时函数执行，执行完毕后就会被移除。同时 jQuery 还对非跨域的请求进行了优化，如果这个请求是在同一个域名下，那么他就会像正常的 Ajax 请求一样工作。

原理：

首先在客户端注册一个 callback, 然后把 callback的名字传给服务器。

此时，服务器先生成 json 数据。
然后以 javascript 语法的方式，生成一个 function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。

客户端浏览器，解析 script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里 .（动态执行回调函数）。

JSONP 是一种脚本注入 (Script Injection) 行为，所以也有一定的安全隐患。

使用示例代码：

<?php if (isset($_GET['jsonpcallback'])){ echo $_GET['jsonpcallback']."([{id:1,name:'aaaa1'},{id:2,name:'bbbb2'}])"; exit; } ?>

<html> <mce:script type='text/javascript' src="commons/scripts/jquery.js" mce_src="commons/scripts/jquery.js"></mce:script> <mce:script type='text/javascript'></mce:script> <body> <div id='res'></div> </body> </html>

注意： jquey是不支持 post方式跨域的。