js几种跨域请求最实用的方法

最新推荐文章于 2021-09-18 16:00:57 发布

转载最新推荐文章于 2021-09-18 16:00:57 发布 · 331 阅读

文章标签：

#jsonp #javascript #域名 #ajax #跨域

跨域请求专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了JavaScript跨域通信的基本原理和技术实现，包括如何利用JSONP实现跨域数据请求，并展示了具体的实现代码。

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

http://www.cnblogs.com/2050/p/3191744.html

http://blog.youkuaiyun.com/dreamer2020/article/details/51608183

http://www.jianshu.com/p/d7fcd17d79a9

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信，比如用ajax向一个不同的域请求数据，或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同，都被当作是不同的域。

下表给出了相对http://store.company.com/dir/page.html同源检测的结果:

JSONP方式

简单来说，jsonp返回的不是json数据，而且一段通过函数将json数据包起来的js代码。这样，就可以通过script标签来加载这段代码，实现任意服务器的访问。
对于如下一个返回json数据的接口：

http://www.test.com/jsonServerResponse
 1
 1

其对应的jsonp方式的用法如下，其中jsonpCallback是客户端实现的处理json数据的函数。

<script>
    var data;
    function jsonpCallback(result) {
        data = result;
    }
</script>
<script src="http://www.test.com/jsonServerResponse?callback=jsonpCallback"></script>
 1
2
3
4
5
6
7
 1
2
3
4
5
6
7

前端页面在调用接口时，需要以callback=jsonpCallback的形式，将本地实现的处理json数据的函数上传到服务器。跨域服务器实现相应的jsonp接口

http://www.test.com/jsonServerResponse?callback=jsonpCallback
 1
 1

这个接口的返回数据如下

jsonpCallback({'msg':'this is json data'});
 1
 1

可以看出，关键得在服务器端实现jsonp方式的接口，有了这些，客户端就可以自由的跨域了！